extract blur logic into ImageBlurPreloader component

Author: nemanjam

src/components/react/ImageBlurPreloader.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+
+import usePrevious from '@/components/react/hooks/usePrevious';
+import { cn } from '@/utils/styles';
+
+import type { FC, ImgHTMLAttributes } from 'react';
+
+interface Props extends ImgHTMLAttributes<HTMLImageElement> {
+  blurSrc: string;
+  className?: string;
+  divClassName?: string;
+  onSrcLoaded?: () => void;
+}
+
+const initialSrc = '' as const;
+
+const ImageBlurPreloader: FC<Props> = ({
+  blurSrc = initialSrc,
+  src = initialSrc,
+  onSrcLoaded,
+  className,
+  divClassName,
+  ...props
+}) => {
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const prevSrc = usePrevious(src);
+
+  // reset hasLoaded on src change
+  useEffect(() => {
+    if (prevSrc !== src) {
+      setHasLoaded(false);
+    }
+  }, [prevSrc, src, setHasLoaded]);
+
+  // handle blur -> xl image switch
+  useEffect(() => {
+    if (!src) return;
+
+    const img = new Image();
+    img.src = src;
+
+    img.onload = () => {
+      setHasLoaded(true);
+      onSrcLoaded?.();
+    };
+  }, [src, setHasLoaded]);
+
+  const imageSrc = hasLoaded ? src : blurSrc;
+
+  return (
+    <>
+      {imageSrc ? (
+        <img {...props} src={imageSrc} className={cn('', className)} />
+      ) : (
+        <div className={cn('aspect-video', divClassName)} />
+      )}
+    </>
+  );
+};
+
+export default ImageBlurPreloader;

src/components/react/ImageRandom.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 
+import ImageBlurPreloader from '@/components/react/ImageBlurPreloader';
 import { getRandomElementFromArray } from '@/utils/array';
 import { cn } from '@/utils/styles';
 
@@ -35,41 +36,24 @@ const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) =>
     setImage(randomImage);
   }, [setImage, randomImage]);
 
-  // handle blur -> xl image switch
-  useEffect(() => {
-    const img = new Image();
-    img.src = image.xl.src;
-
-    img.onload = () => {
-      setHasLoaded(true);
-    };
-  }, [image, setHasLoaded]);
-
   const handleClick = async () => {
     const randomImage = getRandomElementFromArray(galleryImages);
     setImage(randomImage);
     setHasLoaded(false);
   };
 
-  const imageSrc = hasLoaded ? image.xl.src : image.blur.src;
   const imageAlt = hasLoaded ? 'Hero image' : 'Blur image';
 
-  // Todo: use <picture srcSet> for responsive images
-
   return (
-    <>
-      {imageSrc ? (
-        <img
-          {...props}
-          src={imageSrc}
-          alt={imageAlt}
-          onClick={handleClick}
-          className={cn('cursor-pointer', className)}
-        />
-      ) : (
-        <div className={cn('aspect-video', className)} />
-      )}
-    </>
+    <ImageBlurPreloader
+      {...props}
+      blurSrc={image.blur.src}
+      src={image.xl.src}
+      onSrcLoaded={() => setHasLoaded(true)}
+      alt={imageAlt}
+      onClick={handleClick}
+      className={cn('cursor-pointer', className)}
+    />
   );
 };
 

src/components/react/hooks/usePrevious.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+import type { MutableRefObject } from 'react';
+
+const usePrevious = function <T>(value: T): MutableRefObject<T | undefined>['current'] {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};
+
+export default usePrevious;