skills
/
deerflow2
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(workspace): replace message skeleton with spinner

This commit is contained in:
肖应宇 2026-03-31 16:43:57 +08:00
parent 248bf67ec9
commit 93e03e1e5a
1 changed files with 8 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/components/workspace/messages/skeleton.tsx
View File

@ -1,79 +1,14 @@
import { Skeleton } from "@/components/ui/skeleton"; import { Loader } from "@/components/ai-elements/loader";
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>
);
}
export function MessageListSkeleton() { export function MessageListSkeleton() {
let index = 0;
return ( return (
<div className="flex w-full max-w-(--container-width-md) flex-col gap-12 p-8 pt-16"> <div className="flex w-full max-w-(--container-width-md) flex-1 items-center justify-center p-8">
<div <Loader
role="human-message" className="text-muted-foreground"
className="flex w-[50%] flex-col items-end gap-2 self-end" size={28}
> role="status"
<SkeletonBar aria-label="Loading"
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> </div>
); );
} }