Updated Album showcase

src/app/_components/album-showcase.tsx

@@ -4,6 +4,11 @@ import { useEffect, useState } from "react";
 import Tilt from "react-parallax-tilt";
 import { TrackByAlbum } from "./spotify-data";
 import { api } from "@/trpc/react";
+import { quantum } from "ldrs";
+import { ring2 } from "ldrs";
+
+ring2.register();
+quantum.register();
 
 export default function AlbumShowcase({
   album,
@@ -70,13 +75,13 @@ export default function AlbumShowcase({
 
   return (
     <div
+      onClick={() => setShowSpookyImage(!showSpookyImage)}
       key={album.id}
       className="flex w-full flex-wrap gap-3 rounded-xl bg-white bg-opacity-10 p-5 backdrop-blur-lg backdrop-filter"
     >
-      <div>
+      <div className="cursor-pointer">
         <Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
           <img
-            onClick={() => setShowSpookyImage(!showSpookyImage)}
             className="h-36 w-36 cursor-pointer rounded"
             style={{
               display: showSpookyImage ? "none" : "block",
@@ -86,20 +91,41 @@ export default function AlbumShowcase({
           />
           {!!spookyImageSource && (
             <img
-              onClick={() => setShowSpookyImage(!showSpookyImage)}
               className="h-36 w-36 cursor-pointer rounded"
               style={{
-                display: showSpookyImage ? "block" : "none",
+                display:
+                  showSpookyImage && spookyImageLoaded ? "block" : "none",
               }}
               src={spookyImageSource}
               alt={album.name}
               onLoad={() => {
                 if (!spookyImageLoaded && generateSpookyImage.data) {
-                  setSpookyImageLoaded(true);
+                  // setSpookyImageLoaded(true);
                 }
               }}
             />
           )}
+          {showSpookyImage && !spookyImageLoaded && (
+            <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
+              <div>
+                {generateSpookyImage.data ? (
+                  <>
+                    <l-quantum
+                      size="100"
+                      speed="1.75"
+                      color="white"
+                    ></l-quantum>
+                    <p className="text-center">Generating...</p>
+                  </>
+                ) : (
+                  <>
+                    <l-ring-2 size="100" speed="1.75" color="white"></l-ring-2>
+                    <p className="text-center">Generating...</p>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
         </Tilt>
       </div>
       <section className="flex h-36 flex-grow flex-col">