setting image loaded status

src/components/node/NodeImageBlock/index.tsx

@@ -24,8 +24,8 @@ interface IProps {
 const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
   const [current, setCurrent] = useState(0);
   const [height, setHeight] = useState(0);
-  const refs = useRef<HTMLDivElement[]>([]);
-  // const [refs, setRefs] = useState<Record<number, HTMLDivElement | RefObject<any>>>({});
+  const [loaded, setLoaded] = useState<Record<number, boolean>>({});
+  const refs = useRef<Record<number, HTMLDivElement>>({});
 
   const images = useMemo(
     () =>
@@ -33,16 +33,13 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
     [node]
   );
 
-  const setRef = useCallback(
-    index => el => {
-      refs.current[index] = el;
-    },
-    [refs]
-  );
+  const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
+  const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
+    setLoaded,
+    loaded,
+  ]);
 
   useEffect(() => {
-    console.log({ refs });
-
     if (!refs || !refs.current[current]) return;
 
     const el = refs.current[current];
@@ -50,7 +47,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
     const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
 
     setHeight(element_height);
-  }, [refs, current]);
+  }, [refs, current, loaded]);
 
   return (
     <div className={classNames(styles.wrap, { is_loading })}>
@@ -61,7 +58,9 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
           <div className={styles.image_container} style={{ height }}>
             {images.map((file, index) => (
               <div
-                className={classNames(styles.image_wrap, { is_active: index === current })}
+                className={classNames(styles.image_wrap, {
+                  is_active: index === current && loaded[index],
+                })}
                 ref={setRef(index)}
                 key={file.id}
               >
@@ -70,6 +69,7 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
                   src={getImageSize(file.url, 'node')}
                   alt=""
                   key={file.id}
+                  onLoad={onImageLoad(index)}
                 />
               </div>
             ))}

src/components/node/NodeImageBlock/styles.scss

@@ -8,11 +8,12 @@
   position: relative;
   overflow: hidden;
   transition: height 0.5s;
+  user-select: none;
 
   .image {
-    max-height: 800px;
+    max-height: 960px;
+    max-width: 100%;
     opacity: 1;
-    width: 100%;
     border-radius: $radius $radius 0 0;
   }
 }
@@ -27,6 +28,9 @@
   touch-action: none;
   z-index: 1;
   transition: opacity 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &:global(.is_active) {
     opacity: 1;

src/styles/colors.scss

@@ -35,7 +35,7 @@ $button_bg_color: $red_gradient;
 $comment_bg: lighten($main_bg_color, 0%);
 $panel_bg: transparent;
 $node_bg: darken($content_bg, 4%);
-$node_image_bg: lighten($main_bg_color, 4%);
+$node_image_bg: darken($main_bg_color, 2%);
 $node_title_background: darken($main_bg_color, 8%);
 
 $editor_bg: $content_bg;