home page blur image, almost done

Author: nemanjam

src/components/ImageRandom.astro

@@ -1,9 +1,11 @@
 ---
 import ImageRandomReact from '@/components/react/ImageRandom';
-import { allImagesSrc } from '@/utils/image';
+import { getHeroImagesProps } from '@/libs/gallery/images';
 
 // forward Astro (MDX) class attr to className React
 const { class: className, ...props } = Astro.props;
+
+const galleryImages = await getHeroImagesProps();
 ---
 
-<ImageRandomReact {...props} {className} {allImagesSrc} client:load />
+<ImageRandomReact {...props} {className} {galleryImages} client:load />

src/components/react/ImageRandom.tsx

@@ -1,42 +1,76 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { getRandomElementFromArray } from '@/utils/array';
 import { cn } from '@/utils/styles';
 
+import type { HeroImageProps } from '@/libs/gallery/transform';
 import type { FC, ImgHTMLAttributes } from 'react';
 
 interface Props extends ImgHTMLAttributes<HTMLImageElement> {
   // Important: must pass all allImagesSrc from the server or they wont be included on client
-  allImagesSrc: string[];
+  galleryImages: HeroImageProps[];
 }
 
-const initialImageSrc = '';
+const initialImage: HeroImageProps = {
+  blur: {
+    src: '',
+    width: 0,
+    height: 0,
+  },
+  hero: {
+    src: '',
+    width: 0,
+    height: 0,
+  },
+};
 
-const ImageRandomReact: FC<Props> = ({ allImagesSrc, className, ...props }) => {
-  const [imageSrc, setImageSrc] = useState(initialImageSrc);
+const ImageRandomReact: FC<Props> = ({ galleryImages, className, ...props }) => {
+  const randomImage = useMemo(() => getRandomElementFromArray(galleryImages), [galleryImages]);
 
-  useEffect(() => {
-    const run = async () => {
-      setImageSrc(getRandomElementFromArray(allImagesSrc));
-    };
+  const [image, setImage] = useState(initialImage);
+  const [isLoading, setIsLoading] = useState(true);
 
-    run();
-  }, [setImageSrc]);
+  useEffect(() => {
+    setImage(randomImage);
+  }, [setImage, randomImage]);
 
   const handleClick = async () => {
-    setImageSrc(getRandomElementFromArray(allImagesSrc));
+    const randomImage = getRandomElementFromArray(galleryImages);
+    setImage(randomImage);
+    setIsLoading(true);
   };
 
   // Todo: use <picture srcSet> for responsive images
 
   return (
-    <img
-      {...props}
-      src={imageSrc}
-      onClick={handleClick}
-      className={cn('cursor-pointer', className)}
-      alt="Hero image"
-    />
+    <>
+      {image.blur.src && (
+        <img
+          {...props}
+          src={image.blur.src}
+          onClick={handleClick}
+          className={cn('cursor-pointer hidden', { block: isLoading }, className)}
+          alt="Blur image"
+        />
+      )}
+
+      {image.hero.src && (
+        <img
+          {...props}
+          src={image.hero.src}
+          onClick={handleClick}
+          onLoad={() => setIsLoading(false)}
+          className={cn(
+            'cursor-pointer transition-opacity duration-500 ease-in-out opacity-100 block',
+            { 'hidden opacity-0': isLoading },
+            className
+          )}
+          alt="Hero image"
+        />
+      )}
+
+      {!image.blur.src && !image.hero.src && <div className={cn('', className)}>placeholder</div>}
+    </>
   );
 };
 

src/constants/gallery.ts

@@ -1 +1 @@
-export const EXCLUDE_IMAGES = ['avatar1.jpg'];
+export const EXCLUDE_IMAGES = ['avatar1.jpg', 'square-night1.jpg'];