Loading Skeleton

A composite block: imports from @/components/vibeui/ — the install command brings them along with the block. The block owns the layout and its own text, passes the parts props only and leaves their --vibeui-<name>-* palettes alone. The component is self-contained: one file, no npm dependencies, the palette in --vibeui-datagrid-012-*. A client component: a single boolean state switches between the skeleton and the data, and the number of skeleton rows arrives as a prop. A bar is a span with its width coming from the --vibeui-datagrid-012-w variable: the length is computed from the row number, so the rows do not look printed from one template. The shimmer is assembled from a linear-gradient and a single keyframes on background-position, and the prefers-reduced-motion rule suppresses it. The scroll area is marked aria-busy, with a textual status carrying role=status beside it: an animation tells a screen reader nothing. The header and the tfoot stay in place during loading, and the totals are shown as a dash. The theme comes from the surrounding color-scheme through light-dark(): by default the grid lays no panel under itself, it sits on the page background, while the background prop switches on a panel of its own.