smouth image loading

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;
+}