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