Changes on album image

src/app/_components/album-image.tsx

@@ -102,42 +102,32 @@ export function AlbumImage({
         />
       )}
       {showSpookyImage && !spookyImageLoaded && !error && (
-        <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
-          <div>
-            {(() => {
-              if (generateSpookyImageData) {
-                if (onQueue) {
-                  return (
-                    <>
-                      <l-pulsar
-                        size="100"
-                        speed="1.75"
-                        color="white"
-                      ></l-pulsar>{" "}
-                      <p className="text-center">On queue...</p>
-                    </>
-                  );
-                }
+        <div className="flex h-36 w-36 flex-col items-center justify-center rounded bg-slate-900 text-base backdrop-blur-3xl">
+          {(() => {
+            if (generateSpookyImageData) {
+              if (onQueue) {
                 return (
                   <>
-                    <l-quantum
-                      size="100"
-                      speed="1.75"
-                      color="white"
-                    ></l-quantum>
-                    <p className="text-center">Generating...</p>
-                  </>
-                );
-              } else {
-                return (
-                  <>
-                    <l-ring-2 size="100" speed="1.75" color="white"></l-ring-2>
-                    <p className="text-center">Getting image...</p>
+                    <l-pulsar size="75" speed="1.75" color="white"></l-pulsar>{" "}
+                    <p className="text-center">On queue...</p>
                   </>
                 );
               }
-            })()}
-          </div>
+              return (
+                <>
+                  <l-quantum size="75" speed="1.75" color="white"></l-quantum>
+                  <p className="text-center">Generating...</p>
+                </>
+              );
+            } else {
+              return (
+                <>
+                  <l-ring-2 size="75" speed="1.75" color="white"></l-ring-2>
+                  <p className="text-center">Getting image...</p>
+                </>
+              );
+            }
+          })()}
         </div>
       )}
       {error && (

src/app/_components/album-showcase.tsx

@@ -135,10 +135,12 @@ export default function AlbumShowcase({
     >
       <div
         onClick={() => setShowSpookyImage(!showSpookyImage)}
-        className="cursor-pointer *:select-none"
+        className="*:drag-none cursor-pointer *:select-none"
       >
         <Swiper>
-          <SwiperSlide className="shadow-lg">
+          <SwiperSlide
+            className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
+          >
             <AlbumImage
               entry={entry}
               showSpookyImage={showSpookyImage}
@@ -163,7 +165,9 @@ export default function AlbumShowcase({
               error={firstImageError}
             />
           </SwiperSlide>
-          <SwiperSlide>
+          <SwiperSlide
+            className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
+          >
             <AlbumImage
               number={2}
               entry={secondEntry}

tailwind.config.ts

@@ -1,5 +1,6 @@
 import { type Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
+import plugin from "tailwindcss/plugin";
 
 export default {
   content: ["./src/**/*.tsx"],
@@ -10,5 +11,17 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".drag-none": {
+          "-webkit-user-drag": "none",
+          "-khtml-user-drag": "none",
+          "-moz-user-drag": "none",
+          "-o-user-drag": "none",
+          "user-drag": "none",
+        },
+      });
+    }),
+  ],
 } satisfies Config;