From 2c4bdd8003f9dd7bb7b43c2ca58c7f11186273b0 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 23 Feb 2024 19:33:05 -0600
Subject: [PATCH] Hybrid approach for placeholder with/without blur data

---
 src/components/ImageBlurFallback.tsx | 44 ++++++++++++++++------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index 27771b05..64d1c4ef 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/src/components/ImageBlurFallback.tsx
@@ -18,7 +18,7 @@ export default function ImageBlurFallback(props: ImageProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [didError, setDidError] = useState(false);
 
-  const [hideBluePlaceholder, setHideBluePlaceholder] = useState(false);
+  const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false);
 
   const imageClassName = 'object-cover h-full';
 
@@ -35,39 +35,45 @@ export default function ImageBlurFallback(props: ImageProps) {
   useEffect(() => {
     if (!isLoading && !didError) {
       const timeout = setTimeout(() => {
-        setHideBluePlaceholder(true);
+        setHideBlurPlaceholder(true);
       }, 1000);
       return () => clearTimeout(timeout);
     }
   }, [isLoading, didError]);
 
   const showPlaceholder =
-    BLUR_ENABLED &&
-    props.blurDataURL &&
     !wasCached &&
-    !hideBluePlaceholder;
+    !hideBlurPlaceholder;
 
   return (
     <div
       className={clsx(
         className,
-        'flex relative overflow-hidden',
-        'bg-gray-100/50 dark:bg-gray-900/50',
+        'flex relative',
       )}
     >
       {showPlaceholder &&
-        <img {...{
-          ...rest,
-          src: blurDataURL,
-          className: clsx(
-            imageClassName,
-            'absolute',
-            // Fix poorly blurred placeholder data generated by Safari
-            'blur-md scale-110',
-            'transition-opacity duration-300 ease-in',
-            isLoading ? 'opacity-100' : 'opacity-0',
-          ),
-        }} />}
+        <div className={clsx(
+          'absolute inset-0',
+          'bg-main overflow-hidden',
+          'transition-opacity duration-300 ease-in',
+          isLoading ? 'opacity-100' : 'opacity-0',
+        )}>
+          {(BLUR_ENABLED && props.blurDataURL)
+            ? <img {...{
+              ...rest,
+              src: blurDataURL,
+              className: clsx(
+                imageClassName,
+                // Fix poorly blurred placeholder data generated by Safari
+                'blur-md scale-110',
+              ),
+            }} />
+            :  <div className={clsx(
+              'w-full h-full',
+              'bg-gray-100/50 dark:bg-gray-900/50',
+            )}/>}
+        </div>}
       <Image {...{
         ...rest,
         ref: imgRef,