smouth image loading

src/components/node/ImageSwitcher/index.tsx

@@ -1,21 +1,22 @@
 import React, { FC } from 'react';
 import range from 'ramda/es/range';
-import * as styles from './styles.scss';
+import classNames from 'classnames';
 
-import classNames = require('classnames');
+import * as styles from './styles.scss';
 
 interface IProps {
   total: number;
   current: number;
+  loaded?: Record<number, boolean>;
   onChange: (current: number) => void;
 }
 
-const ImageSwitcher: FC<IProps> = ({ total, current, onChange }) => (
+const ImageSwitcher: FC<IProps> = ({ total, current, onChange, loaded }) => (
   <div className={styles.wrap}>
     <div className={styles.switcher}>
       {range(0, total).map(item => (
         <div
-          className={classNames({ is_active: item === current })}
+          className={classNames({ is_active: item === current, is_loaded: loaded[item] })}
           key={item}
           onClick={() => onChange(item)}
         />

src/components/node/ImageSwitcher/styles.scss

@@ -38,6 +38,8 @@
       // background: white;
       border-radius: 8px;
       box-shadow: inset white 0 0 0 2px;
+      transform: scale(0.5);
+      transition: transform 0.5s;
     }
 
     &:global(.is_active) {
@@ -45,5 +47,9 @@
         background: white;
       }
     }
+
+    &:global(.is_loaded)::after {
+      transform: scale(1);
+    }
   }
 }

src/components/node/NodeImageBlock/index.tsx

@@ -14,7 +14,6 @@ import { INode } from '~/redux/types';
 import classNames from 'classnames';
 import { getImageSize } from '~/utils/dom';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { readFileSync } from 'fs';
 
 interface IProps {
   is_loading: boolean;
@@ -23,7 +22,7 @@ interface IProps {
 
 const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
   const [current, setCurrent] = useState(0);
-  const [height, setHeight] = useState(0);
+  const [height, setHeight] = useState(320);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
   const refs = useRef<Record<number, HTMLDivElement>>({});
 
@@ -40,7 +39,9 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
   ]);
 
   useEffect(() => {
-    if (!refs || !refs.current[current]) return;
+    console.log({ height });
+
+    if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
 
     const el = refs.current[current];
 
@@ -51,31 +52,36 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
 
   return (
     <div className={classNames(styles.wrap, { is_loading })}>
-      {!is_loading && (
-        <div>
-          <ImageSwitcher total={images.length} current={current} onChange={setCurrent} />
+      <div>
+        <ImageSwitcher
+          total={images.length}
+          current={current}
+          onChange={setCurrent}
+          loaded={loaded}
+        />
 
-          <div className={styles.image_container} style={{ height }}>
-            {images.map((file, index) => (
-              <div
-                className={classNames(styles.image_wrap, {
-                  is_active: index === current && loaded[index],
-                })}
-                ref={setRef(index)}
+        <div className={styles.image_container} style={{ height }}>
+          {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
+
+          {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={getImageSize(file.url, 'node')}
+                alt=""
                 key={file.id}
-              >
-                <img
-                  className={styles.image}
-                  src={getImageSize(file.url, 'node')}
-                  alt=""
-                  key={file.id}
-                  onLoad={onImageLoad(index)}
-                />
-              </div>
-            ))}
-          </div>
+                onLoad={onImageLoad(index)}
+              />
+            </div>
+          ))}
         </div>
-      )}
+      </div>
     </div>
   );
 };

src/components/node/NodeImageBlock/styles.scss

@@ -36,3 +36,8 @@
     opacity: 1;
   }
 }
+
+.placeholder {
+  background: red;
+  height: 320px;
+}

src/components/node/NodeImageBlockPlaceholder/styles.scss

@@ -1,5 +1,5 @@
 .placeholder {
-  height: 33vw;
+  height: 320px;
   background: transparentize(black, 0.8);
   border: $radius $radius 0 0;
   @include outer_shadow();