From d7f5c57b66a899465c90b14870773e496c034ceb Mon Sep 17 00:00:00 2001
From: "Yeyang (Justin) Sun" <i@jsun.lol>
Date: Sun, 18 Feb 2024 23:28:07 +1030
Subject: [PATCH] fix(carousel-image): preload images (#68)

---
 src/components/ImageCarousel.tsx | 39 +++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/ImageCarousel.tsx b/src/components/ImageCarousel.tsx
index 38b425a5..3e0a0eea 100644
--- a/src/components/ImageCarousel.tsx
+++ b/src/components/ImageCarousel.tsx
@@ -31,18 +31,31 @@ export default function ImageCarousel({ images, width, height }: ImageCarouselPr
     });
 
     return (
-        <div
-            className={`transition-opacity duration-500 ease-in-out ${
-                isTransitioning ? 'opacity-0' : 'opacity-100'
-            }`}
-        >
-            <Image
-                src={images[currentImageIndex].src}
-                alt={images[currentImageIndex].alt}
-                width={width}
-                height={height}
-                className="h-full w-full object-cover"
-            />
-        </div>
+        <>
+            {images.map((image, i) => (
+                <Image
+                    key={i}
+                    src={image.src}
+                    alt={image.alt}
+                    width={width}
+                    height={height}
+                    className="hidden"
+                    priority
+                />
+            ))}
+            <div
+                className={`transition-opacity duration-500 ease-in-out ${
+                    isTransitioning ? 'opacity-0' : 'opacity-100'
+                }`}
+            >
+                <Image
+                    src={images[currentImageIndex].src}
+                    alt={images[currentImageIndex].alt}
+                    width={width}
+                    height={height}
+                    className="h-full w-full object-cover"
+                />
+            </div>
+        </>
     );
 }