File size: 1,260 Bytes
697751d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | "use client";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
export function LoadingPanel({ stage }: { stage: string }) {
return (
<Card className="overflow-hidden border-[#111111]/10" aria-busy="true">
<CardHeader className="border-b border-[#111111]/10 bg-[#fafafa]/60 pb-4">
<div className="flex items-center justify-between gap-3">
<span className="micro-label">Response</span>
<span
role="status"
aria-live="polite"
className="inline-flex items-center gap-2 rounded-full border border-[#d62839]/25 bg-[#fff2f2] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[#d62839]"
>
<span className="inline-block h-2 w-2 animate-pulse rounded-full bg-[#d62839]" />
{stage}
</span>
</div>
</CardHeader>
<CardContent className="space-y-3 p-6" aria-hidden="true">
{["w-11/12", "w-full", "w-4/5", "w-3/5"].map((width, index) => (
<div
key={width}
className={`h-3.5 animate-pulse rounded-full bg-[#111111]/8 ${width}`}
style={{ animationDelay: `${index * 120}ms` }}
/>
))}
</CardContent>
</Card>
);
}
|