Foundations
Loading Skeleton
Placeholders for answers, lists and cards while they load.
2 variantsMIT
Preview
Loading message
Loading message
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/loading-skeleton.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { MessageSkeleton, Skeleton, SkeletonGroup } from "@/components/ui/loading-skeleton";
{loading ? <MessageSkeleton /> : <StreamingMessage data={message} />}
<SkeletonGroup label="Loading history" className="flex flex-col gap-2">
{Array.from({ length: 6 }, (_, i) => <Skeleton key={i} className="h-8" />)}
</SkeletonGroup>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Skeleton | div props | — | One block; size it with className. Hidden from assistive tech. |
| SkeletonGroup.label | string | "Loading" | Wraps skeletons in a status region announced once. |
| MessageSkeleton.lines | number | 3 | Text lines under the name. |
| CardSkeleton.media | boolean | true | Show the image area. |