Skeleton data setPro
Skeletons for tool results at their real size: code with numbered lines, a table with its column widths kept, a chart with axes drawn, a map tile grid.
On this page
ProCode, table, chart and map skeletons at the size of the real result.
Installation
Usage
import { SkeletonTable } from "@/components/ui/chatcn/pro/skeleton-data-set"
<SkeletonTable columns={["minmax(0,2fr)", "minmax(0,1fr)", "6rem"]} numeric={[2]} />Pass the same column tracks the real table uses and nothing moves when the data lands. Line and cell widths come from a seeded random, so the server and the client draw the same skeleton.
Examples
Variants
ProNo gutter, custom columns with numeric ones, a line chart, a dense map and no pulse.
Props
| Component | Props |
|---|---|
SkeletonCode | lines, numbered, filename |
SkeletonTable | columns, numeric, rows, header |
SkeletonChart | kind: "bar" | "line", points, gridLines, height |
SkeletonMap | tiles, aspectRatio, pin |
| All | pulse, delay (ms, default 300), seed, label |
Accessibility
- Each skeleton is a
role="status"with a spoken label ("Loading table") and hides its shapes. - Line numbers are real text in a readable gray.
Motion
Nothing shows for 300 ms, then the block fades in over 150 ms and breathes in opacity as one piece, never a sweep per bar: shimmer is reserved for the Thinking label. Reduced motion keeps it still.