node layout placeholder

src/containers/node/NodeLayout/index.tsx

@@ -1,21 +1,18 @@
-import React, { FC, createElement } from 'react';
+import React, { FC, createElement, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
-import range from 'ramda/es/range';
+import { connect } from 'react-redux';
+
 import { selectNode } from '~/redux/node/selectors';
 import { Card } from '~/components/containers/Card';
-import { ImageSwitcher } from '~/components/node/ImageSwitcher';
+
 import { NodePanel } from '~/components/node/NodePanel';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { Comment } from '~/components/node/Comment';
-
-import { Tags } from '~/components/node/Tags';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import * as styles from './styles.scss';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import { NodeImageBlockPlaceholder } from '~/components/node/NodeImageBlockPlaceholder';
 import { NODE_COMPONENTS } from '~/redux/node/constants';
 
 const mapStateToProps = selectNode;
@@ -25,22 +22,29 @@ type IProps = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps &
   RouteComponentProps<{ id: string }> & {};
 
-const NodeLayout: FC<IProps> = ({
+const NodeLayoutUnconnected: FC<IProps> = ({
   match: {
     params: { id },
   },
   is_loading,
   current: node,
 }) => {
+  useEffect(() => {
+    // if (is_loading) return;
+    // todo: if node not loading, load it!
+  }, []);
+
+  useEffect(() => console.log({ is_loading }), [is_loading]);
+
   const block = node && node.type && NODE_COMPONENTS[node.type] && NODE_COMPONENTS[node.type];
   const view = block && block[is_loading ? 'placeholder' : 'component'];
 
+  console.log({ block, view });
+
   return (
     <Card className={styles.node} seamless>
       {view && createElement(view, { node })}
 
-      <NodeImageBlockPlaceholder />
-
       <NodePanel />
 
       <Group>
@@ -67,4 +71,9 @@ const NodeLayout: FC<IProps> = ({
   );
 };
 
-export { NodeLayout };
+const NodeLayout = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NodeLayoutUnconnected);
+
+export { NodeLayout, NodeLayoutUnconnected };

src/redux/node/handlers.ts

@@ -5,6 +5,7 @@ import { INodeState } from './reducer';
 
 const setSaveErrors = (state: INodeState, { errors }: ReturnType<typeof nodeSetSaveErrors>) =>
   assocPath(['errors'], errors, state);
+
 const setLoading = (state: INodeState, { is_loading }: ReturnType<typeof nodeSetLoading>) =>
   assocPath(['is_loading'], is_loading, state);
 

src/redux/node/sagas.ts

@@ -1,4 +1,6 @@
-import { takeLatest, call, put, select } from 'redux-saga/effects';
+import { takeLatest, call, put, select, delay } from 'redux-saga/effects';
+import { push } from 'connected-react-router';
+
 import { NODE_ACTIONS } from './constants';
 import { nodeSave, nodeSetSaveErrors, nodeLoadNode, nodeSetLoading } from './actions';
 import { postNode } from './api';
@@ -7,7 +9,6 @@ import { flowSetNodes } from '../flow/actions';
 import { ERRORS } from '~/constants/errors';
 import { modalSetShown } from '../modal/actions';
 import { selectFlowNodes } from '../flow/selectors';
-import { push } from 'connected-react-router';
 import { URLS } from '~/constants/urls';
 
 function* onNodeSave({ node }: ReturnType<typeof nodeSave>) {
@@ -35,6 +36,11 @@ function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetSaveErrors({}));
 
   yield put(push(URLS.NODE_URL(id)));
+
+  yield delay(1000);
+
+  yield put(nodeSetLoading(false));
+  yield put(nodeSetSaveErrors({}));
 }
 
 export default function* nodeSaga() {