Scroll animations and error handling

src/app/_components/album-image.tsx

@@ -48,6 +48,9 @@ export function AlbumImage({
   error,
 }: AlbumImageProps) {
   const [spookyImageLoaded, setSpookyImageLoaded] = useState(false);
+  const [loadError, setLoadError] = useState(false);
+
+  const errorValue = error || loadError;
 
   const handleSaveImage = async () => {
     if (!entry.data && !entry.isLoading) {
@@ -87,7 +90,7 @@ export function AlbumImage({
         src={imageSource}
         alt={album.name}
       />
-      {loadGeneratedImage && spookyImageSource && !error && (
+      {loadGeneratedImage && spookyImageSource && !errorValue && (
         <img
           className="h-36 w-36 cursor-pointer rounded"
           style={{
@@ -98,10 +101,11 @@ export function AlbumImage({
           onLoad={onImageLoad}
           onError={() => {
             onImageLoad();
+            setLoadError(true);
           }}
         />
       )}
-      {showSpookyImage && !spookyImageLoaded && !error && (
+      {showSpookyImage && !spookyImageLoaded && !errorValue && (
         <div className="flex h-36 w-36 flex-col items-center justify-center rounded bg-slate-900 text-base backdrop-blur-3xl">
           {(() => {
             if (generateSpookyImageData) {
@@ -130,7 +134,7 @@ export function AlbumImage({
           })()}
         </div>
       )}
-      {error && showSpookyImage && (
+      {errorValue && showSpookyImage && (
         <div className="flex h-36 w-36 items-center justify-center rounded-xl bg-slate-900">
           <ErrorComponent />
         </div>

src/app/_components/album-showcase.tsx

@@ -9,6 +9,7 @@ import { pulsar } from "ldrs";
 import Swiper from "./swiper";
 import { SwiperSlide } from "swiper/react";
 import AlbumImage from "./album-image";
+import ScrollFadeIn from "./scroll-fade-in";
 
 pulsar.register();
 ring2.register();
@@ -112,13 +113,17 @@ export default function AlbumShowcase({
     handleSecondGenerateSpookyImage();
   }, [secondEntry.data, entry.data]);
 
-  const secondSpookyImageMatch = (
-    (secondEntry.data?.value || generateSecondSpookyImage?.data || "") as string
-  ).match(/<img\s+src='([^']+)'[^>]*>/);
-  const secondSpookyImageSource =
-    secondSpookyImageMatch && secondSpookyImageMatch[1]
+  const secondSpookyImageSource = useMemo(() => {
+    const secondSpookyImageMatch = (
+      (secondEntry.data?.value ||
+        generateSecondSpookyImage?.data ||
+        "") as string
+    )?.match(/<img\s+src='([^']+)'[^>]*>/);
+
+    return secondSpookyImageMatch && secondSpookyImageMatch[1]
       ? secondSpookyImageMatch[1]
       : "";
+  }, [secondEntry.data, generateSecondSpookyImage.data]);
 
   const firstPlace = places[0] || 0;
   const secondPlace = places[1] || 0;
@@ -129,10 +134,11 @@ export default function AlbumShowcase({
   );
 
   return (
-    <div
-      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"
-    >
+    <ScrollFadeIn className="flex w-full flex-wrap gap-3 rounded-xl bg-white bg-opacity-10 p-5 backdrop-blur-lg backdrop-filter">
+      {/* <div
+        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
         onClick={() => setShowSpookyImage(!showSpookyImage)}
         className="mr-2 cursor-pointer *:select-none *:drag-none"
@@ -233,6 +239,7 @@ export default function AlbumShowcase({
           ))}
         </ul>
       </section>
-    </div>
+      {/* </div> */}
+    </ScrollFadeIn>
   );
 }

src/server/api/routers/entry.ts

@@ -6,6 +6,7 @@ import {
   makeImageSpooky,
   uploadImage,
 } from "@/server/utils";
+import { TRPCError } from "@trpc/server";
 
 export type Entry = {
   type: "artist" | "album";
@@ -50,11 +51,17 @@ export const entryRouter = createTRPCRouter({
       try {
         const uploadedImage = await uploadImage(input.entry.image);
         if (!uploadedImage || typeof uploadedImage !== "string") {
-          throw new Error("Failed to upload image");
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: "Failed to upload image",
+          });
         }
         const spookyImage = makeImageSpooky(uploadedImage, input.entry.number);
         if (!spookyImage || typeof spookyImage !== "string") {
-          throw new Error("Failed to make image spooky");
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: "Failed to make image spooky",
+          });
         }
         await ctx.db.generatedImage.upsert({
           where: {
@@ -69,6 +76,9 @@ export const entryRouter = createTRPCRouter({
         return spookyImage;
       } catch (error) {
         console.error(error);
+        if (error instanceof TRPCError) {
+          throw error;
+        }
         return error;
       }
     }),
@@ -93,7 +103,10 @@ export const entryRouter = createTRPCRouter({
           },
         });
         if (!generatedImage) {
-          throw new Error("No generated image found");
+          throw new TRPCError({
+            code: "NOT_FOUND",
+            message: "No generated image found",
+          });
         }
         const entry = await ctx.db.spookyImage.create({
           data: {
@@ -104,6 +117,9 @@ export const entryRouter = createTRPCRouter({
         return entry;
       } catch (error) {
         console.error(error);
+        if (error instanceof TRPCError) {
+          throw error;
+        }
         return error;
       }
     }),