shadcn.io is not affiliated with official shadcn/ui
Stats Bar Skeleton Block for Solid
An engineering metrics strip that loads in place: four labels on hairlines stay while open issues, merged pull requests, median review time and build success become data column by column.
Installation
Overview
Show a strip of numbers while it loads, then swap them in without moving anything, with this stats bar skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds one band of four stats on hairlines from Caesura, an engineering-metrics tool: Open issues, Merged this week, Median review and Build success. The band and the four labels are real from the first paint; each value is a Skeleton bar that becomes the figure ("128", "41", "3 h 20 min", "97.2%") in the same box, one column after another when you press Load. It is the shortest block in the set: a header, one band and a polite line. On a phone the band is two by two. It's built from Skeleton, Button and Guides, with a CSS entrance only. For repository headers, status pages and any strip of figures above a longer view.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The four stats are typed in STATS, 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 figures when they arrive. The bars are derived from the same data as the figures, so keep one component for both.
Why do the bars have different widths?
Each bar is close to the width of its own value, so the skeleton looks like the finished strip: a short bar for "41" and a long one for "3 h 20 min". The bar field of each stat sets it, and the data fills the same box whatever its width.
What does the column-by-column reveal do?
Each cell's delay is its column number times 120 milliseconds, so the strip fills from the start edge (the end edge in right-to-left languages). Under reduced motion the delay is zero and the swap is instant.
Does the strip 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. Each value bar is as tall as the value's line. The labels, headings and frames are real in both phases and the polite line reserves two lines, so the block is exactly as tall before, during and after loading at every width.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the stats…", 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 labels are plain text from the first paint, so a reader always knows what is coming. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner, no stagger and no growing: the swap is instant.