Moved conditions and defined second queries/mutations

src/app/_components/album-showcase.tsx

@@ -46,7 +46,28 @@ export default function AlbumShowcase({
   });
 
   const generateSpookyImage = api.entry.generate.useMutation();
+  const generateSecondSpookyImage = api.entry.generate.useMutation();
+
+  const spookyImageMatch = (
+    (entry.data?.value || generateSpookyImage.data) as null | string
+  )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
+
+  const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : "";
+
+  const secondEntry = api.entry.get.useQuery(
+    {
+      type: "album",
+      name: album.name,
+      image: spookyImageSource,
+      number: 2,
+    },
+    {
+      enabled: !!spookyImageSource,
+    },
+  );
+
   const saveImage = api.entry.save.useMutation();
+  const saveSecondImage = api.entry.save.useMutation();
 
   const handleGenerateSpookyImage = async () => {
     if (!entry.data && !entry.isLoading) {
@@ -60,6 +81,18 @@ export default function AlbumShowcase({
     }
   };
 
+  const handleSecondGenerateSpookyImage = async () => {
+    if (!secondEntry.data && !secondEntry.isLoading) {
+      generateSecondSpookyImage.mutate({
+        entry: {
+          type: "album",
+          name: album.name,
+          image: spookyImageSource as string,
+        },
+      });
+    }
+  };
+
   const handleSaveImage = async () => {
     if (!entry.data && !entry.isLoading) {
       saveImage.mutate({
@@ -72,6 +105,18 @@ export default function AlbumShowcase({
     }
   };
 
+  const handleSecondSaveImage = async () => {
+    if (!secondEntry.data && !secondEntry.isLoading) {
+      saveSecondImage.mutate({
+        entry: {
+          type: "album",
+          image: spookyImageSource as string,
+          name: album.name,
+        },
+      });
+    }
+  };
+
   useEffect(() => {
     handleGenerateSpookyImage();
   }, [entry.data]);
@@ -84,12 +129,6 @@ export default function AlbumShowcase({
 
   //TODO ERROR HANDLING
 
-  const spookyImageMatch = (
-    (entry.data?.value || generateSpookyImage.data) as null | string
-  )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
-
-  const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null;
-
   const onImageLoad = () => {
     if (!spookyImageLoaded) {
       setSpookyImageLoaded(true);
@@ -120,9 +159,19 @@ export default function AlbumShowcase({
               place={place}
               spookyImageLoaded={spookyImageLoaded}
               onImageLoad={onImageLoad}
+              loadGeneratedImage={
+                !!(
+                  spookyImageSource &&
+                  (generateSpookyImage.data
+                    ? lastSpookyImageLoaded >= place ||
+                      lastSpookyImageLoaded + 1 === place
+                    : true)
+                )
+              }
+              onQueue={lastSpookyImageLoaded < place - 1}
             />
           </SwiperSlide>
-          <SwiperSlide>
+          {/* <SwiperSlide>
             <AlbumImage
               showSpookyImage={showSpookyImage}
               imageSource={imageSource}
@@ -134,7 +183,7 @@ export default function AlbumShowcase({
               spookyImageLoaded={spookyImageLoaded}
               onImageLoad={onImageLoad}
             />
-          </SwiperSlide>
+          </SwiperSlide> */}
         </Swiper>
       </div>
       <section className="flex h-36 flex-grow flex-col">