From 205af22aa710e0b9332f7941c60148d81af52483 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 15 Nov 2019 15:37:57 +0700
Subject: [PATCH] fixed loading

---
 .../node/NodeImageSlideBlock/index.tsx        | 19 ++++++++++++-------
 .../node/NodeImageSlideBlock/styles.scss      | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 4a800395..14ef1fae 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -219,14 +219,19 @@ const NodeImageSlideBlock: FC<IProps> = ({
   );
 
   return (
-    <div className={classNames(styles.wrap, { is_loading })} ref={wrap}>
-      {is_loading && (
-        <div className={styles.placeholder}>
-          <div>
-            <LoaderCircle size={96} />
-          </div>
+    <div
+      className={classNames(styles.wrap, { [styles.is_loading]: is_loading })}
+      ref={wrap}
+    >
+      <div
+        className={classNames(styles.placeholder, {
+          [styles.is_loading]: is_loading || !loaded[current]
+        })}
+      >
+        <div>
+          <LoaderCircle size={96} />
         </div>
-      )}
+      </div>
 
       {!is_loading && (
         <ImageSwitcher
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss
index 772e3cbd..51055adb 100644
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.scss
@@ -5,6 +5,12 @@
   width: 100%;
   transition: height 0.25s;
   border-radius: $radius $radius 0 0;
+
+  .is_loading {
+    .placeholder {
+      opacity: 1;
+    }
+  }
 }
 
 .image_container {
@@ -58,7 +64,17 @@
   align-items: center;
   justify-content: center;
   background: $content_bg;
-  z-index: 1;
+  z-index: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.25s;
+  z-index: 2;
+  opacity: 0;
+
+  &.is_loading {
+    opacity: 1;
+  }
+
   svg {
     opacity: 0.025;
     fill: white;