From d06593b4cb9f4612d34f1c86db29a486eed7a0ba Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 7 Nov 2019 14:13:46 +0700
Subject: [PATCH] fixed node loading

---
 .../node/NodeImageSlideBlock/index.tsx        | 13 ++++++++++--
 .../node/NodeImageSlideBlock/styles.scss      | 20 +++++++++++++++++--
 src/containers/flow/FlowLayout/index.tsx      |  6 +++---
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 271d4c70..160279a9 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -7,6 +7,7 @@ import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { NODE_SETTINGS } from '~/redux/node/constants';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 interface IProps {
   is_loading: boolean;
@@ -174,6 +175,16 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     [wrap]
   );
 
+  if (is_loading) {
+    return (
+      <div className={styles.placeholder}>
+        <div>
+          <LoaderCircle size={96} />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={classNames(styles.wrap, { is_loading })} ref={wrap}>
       <ImageSwitcher
@@ -195,8 +206,6 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
         onTouchStart={startDragging}
         ref={slide}
       >
-        {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
-
         {images.map((file, index) => (
           <div
             className={classNames(styles.image_wrap, {
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss
index 69a5f869..bdf9d845 100644
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.scss
@@ -44,6 +44,22 @@
 }
 
 .placeholder {
-  background: red;
-  height: 320px;
+  padding-bottom: 66%;
+  position: relative;
+
+  & > div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.025;
+  }
+
+  svg {
+    fill: white;
+  }
 }
diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/containers/flow/FlowLayout/index.tsx
index 19885295..6a17ee03 100644
--- a/src/containers/flow/FlowLayout/index.tsx
+++ b/src/containers/flow/FlowLayout/index.tsx
@@ -13,7 +13,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = {
-  nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
+  nodeGotoNode: NODE_ACTIONS.nodeGotoNode,
   flowSetCellView: FLOW_ACTIONS.flowSetCellView,
 };
 
@@ -22,7 +22,7 @@ type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {
 const FlowLayoutUnconnected: FC<IProps> = ({
   flow: { nodes, heroes, recent, updated },
   user,
-  nodeLoadNode,
+  nodeGotoNode,
   flowSetCellView,
 }) => (
   <FlowGrid
@@ -30,7 +30,7 @@ const FlowLayoutUnconnected: FC<IProps> = ({
     heroes={heroes}
     recent={recent}
     updated={updated}
-    onSelect={nodeLoadNode}
+    onSelect={nodeGotoNode}
     user={user}
     onChangeCellView={flowSetCellView}
   />