Update image loading state handler

irmantastam · Jan 24, 2024 · 6d56dcb · 6d56dcb
1 parent 18d86be
commit 6d56dcb
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/src/components/features/contentful/CtfImage.tsx b/src/components/features/contentful/CtfImage.tsx
@@ -11,10 +11,11 @@ interface ImageProps extends Omit<ImageFieldsFragment, '__typename'> {
 
 export const CtfImage = ({ url, width, height, title, nextImageProps, blurHash }: ImageProps) => {
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
-    setIsLoading(true);
-  }, []);
+    setIsLoading(!isLoaded);
+  }, [isLoaded]);
 
   if (!url || !width || !height) return null;
 
@@ -24,11 +25,14 @@ export const CtfImage = ({ url, width, height, title, nextImageProps, blurHash }
       width={width}
       height={height}
       alt={title || ''}
+      title={title || ''}
       placeholder="blur"
       blurDataURL={blurHash}
       {...nextImageProps}
       className={twMerge(nextImageProps?.className, `${isLoading ? 'blur-md ' : ''}transition-all`)}
-      onLoad={() => setIsLoading(false)}
+      onLoad={() => {
+        setIsLoaded(true);
+      }}
       priority
     />
   );