fix the implementation

petar-i-todorov · Jan 6, 2024 · 8927694 · 8927694
1 parent ffa816b
commit 8927694
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/app/components/blurrable-image.tsx b/app/components/blurrable-image.tsx
@@ -11,6 +11,13 @@ export const BlurrableImage = ({
 	dataUrl: string
 }) => {
 	const [isLoaded, setIsLoaded] = React.useState(false)
+	const imageRef = React.useRef<HTMLImageElement>(null)
+
+	React.useEffect(() => {
+		if (imageRef.current?.complete) {
+			setIsLoaded(true)
+		}
+	}, [])
 
 	return (
 		<>
@@ -26,6 +33,7 @@ export const BlurrableImage = ({
 					},
 					props.className,
 				)}
+				ref={imageRef}
 			/>
 			{/* it gets the alt from the props */}
 			{/* eslint-disable-next-line jsx-a11y/alt-text */}