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,11 +52,17 @@ 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} />
+        <ImageSwitcher
+          total={images.length}
+          current={current}
+          onChange={setCurrent}
+          loaded={loaded}
+        />
 
         <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, {
@@ -75,7 +82,6 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
           ))}
         </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();