shadcn.io is not affiliated with official shadcn/ui
Compact Table Skeleton Block for React
A dense build-run table that loads in place: small type, short rows and mono ids, with a pinned Run column in a scroller on phones and a glyph and a word for each result.
Installation
Overview
Show a dense log table while it loads, then swap the runs in, with this compact table skeleton for React with Base UI. A hairline frame with a plus mark on each corner holds one native table of nine build runs from Cupel, a CI service, in small type with short rows and mono ids for the run, the branch and the commit. The five column heads are real from the first paint; each cell is a Skeleton bar that becomes its value in the same cell, and the rows come in quickly, one after another, when you press Load. A result is a check and "Passed" or a cross and "Failed", never a color alone. The table keeps its width inside a named scroller with the Run column pinned to the start, so a phone pans the rest beneath it. It's built from Skeleton, Button and Guides, with a CSS entrance only. For build logs, job queues and anything dense and monospaced.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The nine runs are typed in RUNS, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real rows when they arrive. The bars are derived from the same array as the data, so keep one row component for both.
Does the table keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The table is fixed-layout with set column widths and fixed row heights, the heads and the frame are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
How does it look on a phone?
The table has a minimum width and sits in a scrollable region named "Cupel build runs", which a keyboard can focus and scroll. The Run column is pinned to the start with a solid background, so the id stays in view while the other columns pan under it. The pin follows the reading direction, so it sits at the right in right-to-left languages.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading build runs…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant.