feat: add skeleton loader

ui/src/app/messages.tsx

@@ -24,6 +24,7 @@ import Avatar from "@/components/ui/avatar";
 import { useIntersection } from "@/hooks/useIntersection";
 import Paragraph from "@/components/paragraph";
 import { nanoid } from "nanoid";
+import { Skeleton } from "@/components/ui/skeleton";
 
 dayjs.extend(relativeTime);
 
@@ -280,15 +281,35 @@ export default function MessagesSection({ chatId, maxCount = 50 }: Props) {
           </div>
         ))}
 
+        {messages == null || isLoading || isFetchingNextPage
+          ? [...Array(10)].map((_, i) => (
+              <div
+                key={i}
+                className={cn(
+                  "mb-4 shrink-0 w-full max-w-[44%]",
+                  i % 2 === 0 ? "self-start" : "self-end",
+                )}
+              >
+                <Skeleton key={i} className="w-20 mb-3 h-6 bg-card" />
+                <Skeleton
+                  key={i}
+                  className={cn(
+                    "w-full h-20 bg-card rounded-2xl",
+                    ["h-20", "h-32", "h-24", "h-40"][i % 4],
+                  )}
+                />
+              </div>
+            ))
+          : null}
+
         <div ref={endScrollRef} className="h-1" />
 
         <div className="mb-6 flex items-center justify-center gap-2 text-[11px] text-muted-foreground">
           <span className="h-px flex-1 bg-border" />
           <div className="flex items-center gap-2">
-            {isLoading ||
-              (isFetchingNextPage && (
-                <Loader2Icon className="animate-spin size-4" />
-              ))}
+            {isLoading || isFetchingNextPage ? (
+              <Loader2Icon className="animate-spin size-4" />
+            ) : null}
             <span>
               {isLoading || isFetchingNextPage
                 ? "Loading..."