Revert to original fallback logic

src/components/ImageBlurFallback.tsx

@@ -14,76 +14,68 @@ export default function ImageBlurFallback(props: ImageProps) {
     ...rest
   } = props;
 
-  const [isLoading, setIsLoading] = useState(false);
+  const [wasCached, setWasCached] = useState(true);
-  const [didLoad, setDidLoad] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
-  const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false);
+  const [didError, setDidError] = useState(false);
+
+  const [hideBluePlaceholder, setHideBluePlaceholder] = useState(false);
 
   const imageClassName = 'object-cover h-full';
 
   const imgRef = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
-    const timeout = setTimeout(() => {
+    const timeout = setTimeout(
-      // Check if image has already loaded/is cached
+      () => setWasCached(imgRef.current?.complete ?? false),
-      // in order to not show blur placeholder on every load
+      100,
-      setIsLoading(imgRef.current?.complete !== true);
+    );
-      setDidLoad(imgRef.current?.complete === true);
-    }, 100);
     return () => clearTimeout(timeout);
   }, []);
 
   useEffect(() => {
-    if (didLoad) {
+    if (!isLoading && !didError) {
-      const timeout = setTimeout(() =>
+      const timeout = setTimeout(() => {
-        // Hide blurred placeholder after image has faded in after 300ms
+        setHideBluePlaceholder(true);
-        setHideBlurPlaceholder(true)
+      }, 1000);
-      , 500);
       return () => clearTimeout(timeout);
     }
-  }, [didLoad]);
+  }, [isLoading, didError]);
 
   const showPlaceholder =
     BLUR_ENABLED &&
     props.blurDataURL &&
-    !hideBlurPlaceholder;
+    !wasCached &&
+    !hideBluePlaceholder;
 
   return (
     <div
       className={clsx(
         className,
-        'flex relative overflow-hidden',
+        'flex relative',
         'bg-gray-100/50 dark:bg-gray-900/50',
       )}
     >
-      <Image {...{
-        ...rest,
-        ref: imgRef,
-        priority,
-        className: clsx(
-          imageClassName,
-          'relative z-10',
-          'transition-opacity duration-300 ease-in',
-          (!isLoading || !showPlaceholder) ? 'opacity-100' : 'opacity-0',
-        ),
-        onLoad: () => {
-          setIsLoading(false);
-          setDidLoad(true);
-        },
-        onError: () => {
-          setIsLoading(false);
-        },
-      }} />
       {showPlaceholder &&
         <img {...{
           ...rest,
           src: blurDataURL,
           className: clsx(
             imageClassName,
-            'absolute z-[1] top-0 left-0',
+            'absolute',
             // Fix poorly blurred placeholder data generated by Safari
             'blur-md scale-110',
+            'transition-opacity duration-300 ease-in',
+            isLoading ? 'opacity-100' : 'opacity-0',
           ),
         }} />}
+      <Image {...{
+        ...rest,
+        ref: imgRef,
+        priority,
+        className: imageClassName,
+        onLoad: () => setIsLoading(false),
+        onError: () => setDidError(true),
+      }} />
     </div>
   );
 }