fix: improve image loading state handling with useRef and complete check

.changeset/tough-shrimps-spend.md

@@ -0,0 +1,5 @@
+---
+"notion-to-jsx": patch
+---
+
+improve image loading state handling with useRef and complete check

packages/notion-to-jsx/src/components/Cover/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { coverContainer, skeletonWrapper, imageStyle } from './styles.css';
 import Skeleton from '../Skeleton';
 
@@ -13,17 +13,31 @@ interface Props {
  */
 const Cover = ({ src, alt }: Props) => {
   const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  // 이미지가 이미 로드된 경우를 체크
+  useEffect(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalHeight !== 0) {
+      setIsLoaded(true);
+    }
+  }, [src]);
+
+  const handleLoad = () => {
+    setIsLoaded(true);
+  };
 
   return (
     <div className={coverContainer}>
       <div className={skeletonWrapper({ isLoaded })}>
         <Skeleton variant="image" isLoading={!isLoaded} />
       </div>
       <img
+        ref={imgRef}
         src={src}
         alt={alt}
         className={imageStyle({ isLoaded })}
-        onLoad={() => setIsLoaded(true)}
+        onLoad={handleLoad}
         loading="lazy"
       />
     </div>

packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { MemoizedRichText } from '../MemoizedComponents';
 import {
   imageContainer,
@@ -42,6 +42,19 @@ const Image = ({
   isColumn = false,
 }: Props) => {
   const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  // 이미지가 이미 로드된 경우를 체크
+  useEffect(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalHeight !== 0) {
+      setIsLoaded(true);
+    }
+  }, [src]);
+
+  const handleLoad = () => {
+    setIsLoaded(true);
+  };
 
   return (
     <div className={imageContainer}>
@@ -50,14 +63,15 @@ const Image = ({
           <Skeleton variant="image" isLoading={!isLoaded} />
         </div>
         <img
+          ref={imgRef}
           className={imageStyle({
             loaded: isLoaded,
             hasAspectRatio: !!format?.block_aspect_ratio,
           })}
           src={src}
           alt={alt}
           loading="lazy"
-          onLoad={() => setIsLoaded(true)}
+          onLoad={handleLoad}
           width={format?.block_width}
           height={format?.block_height}
           style={getImageTagStyle(format)}