Fade in image even without placeholder blur data

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,7 +35,7 @@ export default function ImageBlurFallback(props: ImageProps) {
   useEffect(() => {
     if (!isLoading && !didError) {
       const timeout = setTimeout(() => {
-        setHideBluePlaceholder(true);
+        setHideBlurPlaceholder(true);
       }, 1000);
       return () => clearTimeout(timeout);
     }
@@ -44,8 +44,7 @@ export default function ImageBlurFallback(props: ImageProps) {
   const showPlaceholder =
     BLUR_ENABLED &&
     props.blurDataURL &&
-    !wasCached &&
-    !hideBluePlaceholder;
+    !hideBlurPlaceholder;
 
   return (
     <div
@@ -55,6 +54,20 @@ export default function ImageBlurFallback(props: ImageProps) {
         'bg-gray-100/50 dark:bg-gray-900/50',
       )}
     >
+      <Image {...{
+        ...rest,
+        ref: imgRef,
+        priority,
+        className: clsx(
+          imageClassName,
+          'z-10',
+          'transition-opacity duration-300 ease-in',
+          (wasCached || !isLoading) ? 'opacity-100' : 'opacity-0',
+        ),
+        placeholder: 'empty',
+        onLoad: () => setIsLoading(false),
+        onError: () => setDidError(true),
+      }} />
       {showPlaceholder &&
         <img {...{
           ...rest,
@@ -62,21 +75,10 @@ export default function ImageBlurFallback(props: ImageProps) {
           className: clsx(
             imageClassName,
             'absolute',
-            'transition-opacity duration-300 ease-in',
             // Fix poorly blurred placeholder data generated by Safari
-            'blur-md scale-105',
-            isLoading ? 'opacity-100' : 'opacity-0',
+            'blur-md scale-110',
           ),
         }} />}
-      <Image {...{
-        ...rest,
-        ref: imgRef,
-        priority,
-        className: imageClassName,
-        placeholder: 'empty',
-        onLoad: () => setIsLoading(false),
-        onError: () => setDidError(true),
-      }} />
     </div>
   );
 }