shadcn.io is not affiliated with official shadcn/ui
Analytics Dashboard Skeleton Block for React Aria
A site analytics overview that loads in place: a period select and Export stay while four figure tiles, a line chart and a top pages table become Last 7 days or Last 28 days data.
Installation
Overview
Show a whole analytics overview while it loads, then swap the figures in without moving anything, with this analytics dashboard skeleton for React with React Aria. A hairline frame with a plus mark on each corner holds a toolbar band, four figure tiles on hairlines, a line chart and a table of five top pages from Amalgam, a privacy-first site analytics tool. The period Native Select, the Export Button, the tile labels, the chart's gridlines and the table heads are real from the first paint; each figure, its change (an arrow and a signed amount), the line, its scale, its dates and the table's cells are Skeleton bars that become the data in the same box, the tiles one column at a time and the line growing from its start edge when you press Load. Choosing the other period loads a second typed set. Export says it is not wired in this demo. On a phone the tiles are two by two and the table folds Exits under the page. It's built from Skeleton, Native Select, Button and Guides, with a CSS entrance only. For analytics, reporting and any overview with a period.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. Both periods are typed in FIRST and SECOND, 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. Key your query on the period and set the phase from its pending state.
What does the period select do?
It is chrome, so it works before the data does. Choosing the other period goes back to the bars and loads that period's typed set, with its own figures, 7 or 28 points of the line and pages; choosing during a load restarts the wait. Export does nothing and says so in the polite line.
How does the line appear?
The chart sits in the same box as its placeholder. When the data arrives it is revealed with a clip that opens from the start edge over 700 milliseconds, after the bar fades. The clip is a CSS transition on the ChartBox wrapper, so it needs no animation library, it opens left to right in every reading direction (the plot is always laid out left to right), and under reduced motion it is off.
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. The line has the same box in both phases and the table is fixed-layout with set column widths and row heights. 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 site overview…", 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 line is hidden from assistive technology and has a text equivalent that gives its range and its busiest day, and the table is a real table with a caption. 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.