From 93e03e1e5aab1c4bb4c5ad19b991a30a1aeac202 Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Tue, 31 Mar 2026 16:43:57 +0800
Subject: [PATCH] feat(workspace): replace message skeleton with spinner

---
 .../workspace/messages/skeleton.tsx           | 81 ++-----------------
 1 file changed, 8 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/workspace/messages/skeleton.tsx b/frontend/src/components/workspace/messages/skeleton.tsx
index f94604e4..04e6447b 100644
--- a/frontend/src/components/workspace/messages/skeleton.tsx
+++ b/frontend/src/components/workspace/messages/skeleton.tsx
@@ -1,79 +1,14 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-const STAGGER_MS = 60;
-
-function SkeletonBar({
-  className,
-  style,
-  originRight,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-  originRight?: boolean;
-}) {
-  return (
-    <div
-      className={`animate-skeleton-entrance fill-mode-[forwards] overflow-hidden rounded-md ${originRight ? "origin-[right]" : "origin-[left]"} ${className ?? ""}`}
-      style={{ opacity: 0, ...style }}
-    >
-      <Skeleton className="h-full w-full rounded-md" />
-    </div>
-  );
-}
+import { Loader } from "@/components/ai-elements/loader";
 
 export function MessageListSkeleton() {
-  let index = 0;
   return (
-    <div className="flex w-full max-w-(--container-width-md) flex-col gap-12 p-8 pt-16">
-      <div
-        role="human-message"
-        className="flex w-[50%] flex-col items-end gap-2 self-end"
-      >
-        <SkeletonBar
-          className="h-6 w-full"
-          originRight
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-[80%]"
-          originRight
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-      </div>
-      <div role="assistant-message" className="flex flex-col gap-2">
-        <SkeletonBar
-          className="h-6 w-full"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-full"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-[70%]"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-full"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-full"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-full"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-[60%]"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-        <SkeletonBar
-          className="h-6 w-[40%]"
-          style={{ animationDelay: `${index++ * STAGGER_MS}ms` }}
-        />
-      </div>
+    <div className="flex w-full max-w-(--container-width-md) flex-1 items-center justify-center p-8">
+      <Loader
+        className="text-muted-foreground"
+        size={28}
+        role="status"
+        aria-label="Loading"
+      />
     </div>
   );
 }