From dfb66e3742b309542e0217c0e42a362ca0781c52 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 27 Oct 2020 15:05:42 +0700
Subject: [PATCH 1/3] made proof-of-concept for image previewing

---
 .../node/NodeImageSlideBlock/index.tsx        | 30 +++++++++++++------
 .../node/NodeImageSlideBlock/styles.scss      |  1 -
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 3f67b153..3da8172d 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -77,8 +77,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
   ]);
 
   // update outside hooks
-  useEffect(() => updateLayout(), [loaded, height, images]);
-  useEffect(() => updateSizes(), [refs, current, loaded, images]);
+  useEffect(updateLayout, [loaded, height, images]);
+  useEffect(updateSizes, [refs, current, loaded, images]);
 
   useEffect(() => {
     const timeout = setTimeout(updateLayout, 300);
@@ -300,14 +300,26 @@ const NodeImageSlideBlock: FC<IProps> = ({
                 ref={setRef(index)}
                 key={node.updated_at + file.id}
               >
-                <img
+                {
+                  // check if metadata is available, then show loader
+                }
+                <svg
+                  viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
                   className={styles.image}
-                  src={getURL(file, PRESETS['1600'])}
-                  alt=""
-                  key={file.id}
-                  onLoad={onImageLoad(index)}
-                  style={{ maxHeight: max_height }}
-                />
+                  style={{ maxHeight: max_height, width: file.metadata.width }}
+                >
+                  <rect fill="blue" width="100%" height="100%" />
+                </svg>
+                {
+                  <img
+                    className={styles.image}
+                    src={getURL(file, PRESETS['1600'])}
+                    alt=""
+                    key={file.id}
+                    onLoad={onImageLoad(index)}
+                    style={{ maxHeight: max_height, position: 'absolute', width: 100, top: '50%' }}
+                  />
+                }
               </div>
             ))}
         </div>
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss
index c1d00973..e821d329 100644
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.scss
@@ -155,7 +155,6 @@
   align-items: center;
   justify-content: center;
   background: $content_bg;
-  z-index: 0;
   pointer-events: none;
   touch-action: none;
   transition: opacity 2s;

From 51873064011c7aa0c15319b8a89930652e502601 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 27 Oct 2020 16:35:45 +0700
Subject: [PATCH 2/3] added blurred image for preloading

---
 .../node/NodeImageSlideBlock/index.tsx        | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 3da8172d..6ba8c19b 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -306,9 +306,28 @@ const NodeImageSlideBlock: FC<IProps> = ({
                 <svg
                   viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
                   className={styles.image}
-                  style={{ maxHeight: max_height, width: file.metadata.width }}
+                  style={{
+                    maxHeight: max_height,
+                    // height: file.metadata.height,
+                    width: file.metadata.width,
+                  }}
                 >
-                  <rect fill="blue" width="100%" height="100%" />
+                  <defs>
+                    <filter id="f1" x="0" y="0">
+                      <feGaussianBlur stdDeviation="10" />
+                      <feColorMatrix in="a1" type="saturate" values="0.5" />
+                      <feColorMatrix in="a1" type="brightness" values="2" />
+                    </filter>
+                  </defs>
+
+                  <rect fill="#333333" width="100%" height="100%" />
+
+                  <image
+                    xlinkHref={getURL(file, PRESETS['300'])}
+                    width="100%"
+                    height="100%"
+                    filter="url(#f1)"
+                  />
                 </svg>
                 {
                   <img

From 145901d72cf7b38bfd558fdf4fcfb923423b4977 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 6 Nov 2020 22:16:32 +0700
Subject: [PATCH 3/3] added image preloader

---
 .../node/NodeImageSlideBlock/index.tsx        | 57 ++++++++++++-------
 .../NodeImageSlideBlock/styles.module.scss    | 39 ++++++++-----
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 44e97b93..aafb654c 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -272,7 +272,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
       <div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
         <div
           className={classNames(styles.placeholder, {
-            [styles.is_loading]: is_loading || !loaded[current],
+            [styles.is_loading]: is_loading,
           })}
         >
           <div>
@@ -295,32 +295,46 @@ const NodeImageSlideBlock: FC<IProps> = ({
             images.map((file, index) => (
               <div
                 className={classNames(styles.image_wrap, {
-                  is_active: index === current && loaded[index],
+                  [styles.is_active]: index === current,
                 })}
                 ref={setRef(index)}
                 key={node.updated_at + file.id}
               >
-                {
-                  // check if metadata is available, then show loader
-                }
                 <svg
                   viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
-                  className={styles.image}
+                  className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
                   style={{
                     maxHeight: max_height,
-                    // height: file.metadata.height,
-                    width: file.metadata.width,
+                    width: '100%',
                   }}
                 >
                   <defs>
                     <filter id="f1" x="0" y="0">
-                      <feGaussianBlur stdDeviation="10" />
-                      <feColorMatrix in="a1" type="saturate" values="0.5" />
-                      <feColorMatrix in="a1" type="brightness" values="2" />
+                      <feBlend
+                        mode="multiply"
+                        x="0%"
+                        y="0%"
+                        width="100%"
+                        height="100%"
+                        in="SourceGraphic"
+                        in2="SourceGraphic"
+                        result="blend"
+                      />
+
+                      <feGaussianBlur
+                        stdDeviation="15 15"
+                        x="0%"
+                        y="0%"
+                        width="100%"
+                        height="100%"
+                        in="blend"
+                        edgeMode="none"
+                        result="blur2"
+                      />
                     </filter>
                   </defs>
 
-                  <rect fill="#333333" width="100%" height="100%" />
+                  <rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
 
                   <image
                     xlinkHref={getURL(file, PRESETS['300'])}
@@ -329,16 +343,15 @@ const NodeImageSlideBlock: FC<IProps> = ({
                     filter="url(#f1)"
                   />
                 </svg>
-                {
-                  <img
-                    className={styles.image}
-                    src={getURL(file, PRESETS['1600'])}
-                    alt=""
-                    key={file.id}
-                    onLoad={onImageLoad(index)}
-                    style={{ maxHeight: max_height, position: 'absolute', width: 100, top: '50%' }}
-                  />
-                }
+
+                <img
+                  className={classNames(styles.image, { [styles.is_loaded]: loaded[index] })}
+                  src={getURL(file, PRESETS['1600'])}
+                  alt=""
+                  key={file.id}
+                  onLoad={onImageLoad(index)}
+                  style={{ maxHeight: max_height }}
+                />
               </div>
             ))}
         </div>
diff --git a/src/components/node/NodeImageSlideBlock/styles.module.scss b/src/components/node/NodeImageSlideBlock/styles.module.scss
index e821d329..ee38720f 100644
--- a/src/components/node/NodeImageSlideBlock/styles.module.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.module.scss
@@ -39,18 +39,6 @@
     transition: none;
   }
 
-  .image {
-    max-width: 100%;
-    opacity: 1;
-    border-radius: $radius;
-    box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
-      transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
-
-    @include tablet {
-      border-radius: 0;
-    }
-  }
-
   &.is_dragging {
     transition: none;
   }
@@ -67,7 +55,7 @@
   padding: 0 $gap / 2;
   position: relative;
 
-  &:global(.is_active) {
+  &.is_active {
     opacity: 1;
   }
 
@@ -170,3 +158,28 @@
     fill: white;
   }
 }
+
+.image, .preview {
+  max-width: 100%;
+  border-radius: $radius;
+
+  @include tablet {
+    border-radius: 0;
+  }
+}
+
+.image {
+  position: absolute;
+  opacity: 0;
+
+  &.is_loaded {
+    opacity: 1;
+    position: static;
+  }
+}
+
+.preview {
+  &.is_loaded {
+    display: none;
+  }
+}