From f837924ad40accd1733d9dd3e941c4af080c3d3a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 7 Nov 2019 15:43:39 +0700
Subject: [PATCH] fixed slide block transitions

---
 .../node/NodeImageSlideBlock/index.tsx        | 64 ++++++++++---------
 .../node/NodeImageSlideBlock/styles.scss      | 31 ++++-----
 src/redux/node/sagas.ts                       |  8 ++-
 3 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 160279a9..cc29c1af 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -76,7 +76,13 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     if (!wrap || !wrap.current) return;
 
     const { width } = wrap.current.getBoundingClientRect();
+
     const selected = Math.abs(-offset / width);
+
+    if (is_loading) {
+      return setHeight((width * 9) / 16);
+    }
+
     const prev = Math.max(heights[Math.floor(selected)] || 320, 320);
     const next = Math.max(heights[Math.ceil(selected)] || 320, 320);
     const now = prev - (prev - next) * (selected % 1);
@@ -84,7 +90,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     if (current !== Math.round(selected)) setCurrent(Math.round(selected));
 
     setHeight(now);
-  }, [offset, heights, max_height, images]);
+  }, [wrap, offset, heights, max_height, images, is_loading]);
 
   const onDrag = useCallback(
     event => {
@@ -107,6 +113,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
   );
 
   const normalizeOffset = useCallback(() => {
+    if (!slide.current || !wrap.current) return;
+
     const { width: wrap_width } = wrap.current.getBoundingClientRect();
     const { width: slide_width } = slide.current.getBoundingClientRect();
 
@@ -175,18 +183,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}>
+      {is_loading && (
+        <div className={styles.placeholder}>
+          <div>
+            <LoaderCircle size={96} />
+          </div>
+        </div>
+      )}
+
       <ImageSwitcher
         total={images.length}
         current={current}
@@ -197,7 +203,6 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
       <div
         className={styles.image_container}
         style={{
-          transition: is_dragging ? 'none' : 'transform 500ms',
           height,
           transform: `translate(${offset}px, 0)`,
           width: `${images.length * 100}%`,
@@ -206,24 +211,25 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
         onTouchStart={startDragging}
         ref={slide}
       >
-        {images.map((file, index) => (
-          <div
-            className={classNames(styles.image_wrap, {
-              is_active: index === current && loaded[index],
-            })}
-            ref={setRef(index)}
-            key={file.id}
-          >
-            <img
-              className={styles.image}
-              src={getURL(file, PRESETS['1400'])}
-              alt=""
+        {!is_loading &&
+          images.map((file, index) => (
+            <div
+              className={classNames(styles.image_wrap, {
+                is_active: index === current && loaded[index],
+              })}
+              ref={setRef(index)}
               key={file.id}
-              onLoad={onImageLoad(index)}
-              style={{ maxHeight: max_height }}
-            />
-          </div>
-        ))}
+            >
+              <img
+                className={styles.image}
+                src={getURL(file, PRESETS['1400'])}
+                alt=""
+                key={file.id}
+                onLoad={onImageLoad(index)}
+                style={{ maxHeight: max_height }}
+              />
+            </div>
+          ))}
       </div>
     </div>
   );
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss
index bdf9d845..930de535 100644
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.scss
@@ -17,6 +17,11 @@
   overflow: hidden;
   user-select: none;
   will-change: transform, height;
+  transition: height 500ms, transform 500ms;
+
+  &:active {
+    transition: none;
+  }
 
   .image {
     max-height: 960px;
@@ -44,22 +49,18 @@
 }
 
 .placeholder {
-  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;
-  }
-
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $content_bg;
+  z-index: 1;
   svg {
+    opacity: 0.025;
     fill: white;
   }
 }
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index 2447ae06..07fd9e50 100644
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@@ -107,15 +107,17 @@ function* onNodeLoad({ id }: ReturnType<typeof nodeLoadNode>) {
     data: { node, error },
   } = yield call(reqWrapper, getNode, { id });
 
-  yield put(nodeSetLoading(false));
-
   if (error) {
-    return yield put(nodeSetSaveErrors({ error }));
+    yield put(nodeSetSaveErrors({ error }));
+    yield put(nodeSetLoading(false));
+    return;
   }
 
   yield put(nodeSetSaveErrors({}));
   yield put(nodeSetCurrent(node));
 
+  yield put(nodeSetLoading(false));
+
   const {
     comments: {
       data: { comments },