shadcn.io is not affiliated with official shadcn/ui
Dashboard Stats Skeleton Block for Svelte
Four weekly sales figures on hairlines that load in place: the labels, the grid and a View report button stay while each value and its trend arrow become data column by column.
Installation
Overview
Show headline numbers while they load, then swap them in without moving anything, with this dashboard stats skeleton for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a heading and four cells on hairlines for Revenue, Orders, Customers and Refund rate from Bordure, a farm-shop sales tracker, over a foot with the time of the last count and a View report Button. The heading, the four labels, the grid and the button are real from the first paint; each large value, its trend (an arrow, a signed amount and "vs last week") and the update time are Skeleton bars that become the data in the same box, one column after another when you press Load. View report does nothing here and says so. On a phone the cells are two by two. It's built from Skeleton, Button and Guides, with a CSS entrance only. For summary rows, KPI headers and any set of figures read at a glance.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The four figures are typed in FIGURES, 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.
How is a falling figure shown?
With an arrow that points down and a minus sign, never a color alone: the refund rate fell by 0.4 points, so it reads "−0.4 pts" with a downward arrow. A rise has the other arrow and a plus. Both come from the figure's down flag, so a new figure needs no extra markup.
What does the column-by-column reveal do?
Each cell's delay is its column number times 120 milliseconds, so the row fills from the start edge (the end edge in right-to-left languages, because the cells are laid out that way). Under reduced motion the delay is zero and the swap is instant.
Does the block 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, so a cell never changes height. 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 figures…", 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. Each value and trend is plain text with the change read as "plus 12.4%" or "minus 0.4 pts" from its sign. 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.