feat: loading state for sample image (#55)

app/chat/page.tsx

@@ -16,6 +16,8 @@ import { Button } from '@/components/ui/Button';
 import Img from '@/components/ui/Img';
 import { MessageRaw } from '@/lib/db/types';
 import { dbPostCreateChat } from '@/lib/db/functions';
+import { useState } from 'react';
+import Loading from '@/components/ui/Loading';
 
 // const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
 const EXAMPLE_URL =
@@ -49,6 +51,7 @@ const exampleMessages = [
 
 export default function Page() {
   const router = useRouter();
+  const [isUploading, setUploading] = useState<false | Number>(false);
   return (
     <div className="mx-auto max-w-2xl px-4 mt-8">
       <div className="rounded-lg border bg-background p-8 mb-6">
@@ -90,19 +93,26 @@ export default function Page() {
         {exampleMessages.map((example, index) => (
           <div
             key={index}
-            className={`cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
+            className={`relative cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
               index > 1 && 'hidden md:block'
             }`}
             onClick={async () => {
+              setUploading(index);
               const resp = await dbPostCreateChat({
                 mediaUrl: example.url,
                 initMessages: example.initMessages,
               });
+              setUploading(false);
               if (resp) {
                 router.push(`/chat/${resp.id}`);
               }
             }}
           >
+            {isUploading === index && (
+              <div className="absolute top-0 left-0 size-full flex items-center justify-center bg-white/60">
+                <Loading />
+              </div>
+            )}
             <Img src={example.url} alt="example images" className="w-1/4" />
             <div className="flex items-start flex-col h-full ml-3 w-3/4">
               <div className="text-sm font-semibold">{example.heading}</div>