Improved error handling

src/app/_components/album-image.tsx

@@ -1,7 +1,7 @@
 import { api } from "@/trpc/react";
 import React, { useEffect, useState } from "react";
 import Tilt from "react-parallax-tilt";
-import SadFaceIcon from "./sad-face-icon";
+import ErrorComponent from "./error";
 
 interface AlbumImageProps {
   number?: number;
@@ -130,12 +130,9 @@ export function AlbumImage({
           })()}
         </div>
       )}
-      {error && (
-        <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
-          <div>
-            <SadFaceIcon className="h-16 w-16" color="white" />
-            <p className="text-center">Error</p>
-          </div>
+      {error && showSpookyImage && (
+        <div className="flex h-36 w-36 items-center justify-center rounded-xl bg-slate-900">
+          <ErrorComponent />
         </div>
       )}
     </Tilt>

src/app/_components/album-showcase.tsx

@@ -135,7 +135,7 @@ export default function AlbumShowcase({
     >
       <div
         onClick={() => setShowSpookyImage(!showSpookyImage)}
-        className="cursor-pointer *:select-none *:drag-none"
+        className="mr-2 cursor-pointer *:select-none *:drag-none"
       >
         {showSpookyImage ? (
           <Swiper>

src/app/_components/artist-showcase.tsx

@@ -5,6 +5,7 @@ import Tilt from "react-parallax-tilt";
 // import { AiLoader } from "./ai-loader";
 import { quantum } from "ldrs";
 import { ring2 } from "ldrs";
+import ErrorComponent from "./error";
 
 ring2.register();
 quantum.register();
@@ -46,6 +47,8 @@ export default function ArtistShowcase({
   const generateSpookyImage = api.entry.generate.useMutation();
   const saveImage = api.entry.save.useMutation();
 
+  const error = !!(entry.error || generateSpookyImage.error);
+
   const handleGenerateSpookyImage = async () => {
     if (!entry.data && !entry.isLoading) {
       generateSpookyImage.mutate({
@@ -112,7 +115,8 @@ export default function ArtistShowcase({
           (generateSpookyImage.data
             ? lastSpookyImageLoaded >= place ||
               lastSpookyImageLoaded + 1 === place
-            : true) && (
+            : true) &&
+          !error && (
             <img
               style={{
                 display:
@@ -127,27 +131,14 @@ export default function ArtistShowcase({
               alt={name}
             />
           )}
-        {showSpookyImage && !spookyImageLoaded && (
+        {showSpookyImage && error && (
+          <div className="flex h-56 w-56 items-center justify-center">
+            <ErrorComponent />
+          </div>
+        )}
+        {showSpookyImage && !spookyImageLoaded && !error && (
           <div className="flex h-56 w-56 items-center justify-center">
             <div>
-              {/* {generateSpookyImage.data ? (
-                <>
-                  <l-quantum size="165" speed="1.75" color="white"></l-quantum>
-                  <p className="text-center">Generating...</p>
-                </>
-              ) : (
-                <>
-                  <l-ring-2
-                    size="165"
-                    stroke="5"
-                    stroke-length="0.25"
-                    bg-opacity="0.1"
-                    speed="0.8"
-                    color="white"
-                  ></l-ring-2>
-                  <p className="text-center">Getting image...</p>
-                </>
-              )} */}
               {(() => {
                 if (generateSpookyImage.data) {
                   if (lastSpookyImageLoaded < place - 1) {

src/app/_components/error.tsx

@@ -0,0 +1,12 @@
+import SadFaceIcon from "./sad-face-icon";
+
+export const Error = () => {
+  return (
+    <div>
+      <SadFaceIcon className="h-16 w-16" color="white" />
+      <p className="text-center">Error</p>
+    </div>
+  );
+};
+
+export default Error;