Artifact Admin: Switch to image rendering for no lag experience

app/(ui)/artifact/admin/[id]/client.tsx

@@ -1,31 +1,53 @@
 "use client";
 
-import { Copy, CopyCheck, Loader2 } from "lucide-react";
+import { Copy, CopyCheck, OctagonAlert, ScanSearch } from "lucide-react";
+import Image from "next/image";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-export function EnkaBrowser({ uid }: { uid: string }) {
+export function EnkaBrowser({
+  uid,
+  cidAmber,
+}: {
+  uid: string;
+  cidAmber: string;
+}) {
   const [id, setId] = useState(uid);
   const [ready, setReady] = useState(false);
+  const [error, setError] = useState(false);
   useEffect(() => {
-    setId(uid);
     setReady(false);
-  }, [uid]);
+    setError(false);
+    setId(`${uid}/${cidAmber}`);
+  }, [uid, cidAmber]);
   return (
     <div className="h-full w-full relative">
-      {!ready && (
-        <Loader2 className="animate-spin absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-8 text-muted-foreground z-100" />
+      {!ready && !error && (
+        <ScanSearch className="animate-pulse absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-8 text-muted-foreground z-100" />
       )}
-      <iframe
-        src={`https://enka.network/u/${id}`}
-        className={cn(
-          "w-full border-0 bg-card -mt-20 h-[calc(100%+5rem)]",
-          !ready && "grayscale blur-md brightness-50 pointer-events-none",
+      {error && (
+        <div className="flex flex-col items-center gap-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-100">
+          <OctagonAlert className="size-8 text-red-500" />
+          <span>ไม่สามารถโหลดข้อมูลตัวละคร</span>
+        </div>
+      )}
+      <div
+        className={cn("w-full h-full border-0 bg-card transition-[filter]",
+          (!ready || error) &&
+            "grayscale blur-md brightness-50 pointer-events-none",
         )}
-        title="Enka Network"
-        onLoad={() => setReady(true)}
-      />
+      >
+        <Image
+          src={`https://cards.enka.network/u/${id}/image`}
+          alt={`Enka card for ${id}`}
+          fill
+          objectFit="contain"
+          title="Enka Network"
+          onLoadingComplete={() => setReady(true)}
+          onError={() => setError(true)}
+        />
+      </div>
     </div>
   );
 }

app/(ui)/artifact/admin/[id]/page.tsx

@@ -50,7 +50,9 @@ export default async function AdminSubmissionView({
           <Avatar char={char} />
         </div>
         <div className="border rounded-md h-full overflow-hidden">
-          {enka && <EnkaBrowser uid={sub?.uid || ""} />}
+          {enka && (
+            <EnkaBrowser uid={sub?.uid || ""} cidAmber={char?.amber || ""} />
+          )}
         </div>
       </div>
     </div>

next.config.ts

@@ -20,6 +20,9 @@ const nextConfig: NextConfig = withBundleAnalyzer({
       {
         hostname: "i.ytimg.com",
       },
+      {
+        hostname: "cards.enka.network",
+      },
     ],
   },
   experimental: {