docs / core / page-loader
PageLoader
a Spinner given a room of its own. it claims a minimum height and centres in it, so a route that is still fetching holds its shape instead of collapsing to nothing.
intensity · recedesrsc · client
provenance
shaped from sisu-pluslayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
route-level waits, and panels that have nothing to show yetthe label is the honest part: say what is loading, not that it is loadingnot for a button or an inline wait. that is Spinner on its ownnot over content that already exists. that is LoadingOverlaya11y
the Spinner carries the live region · the label is read with it, so the wait is announced rather than silentjest-axedependencies
Spinner from the same packagelive demo · try it out
loading your dashboard
customize
labelwhat is being waited on
variantthe spinner it centres
sizespinner scale
toneaccent, or inherit the ink
usage
import { PageLoader } from "@usva-ui/react/primitives/spinner";
<PageLoader label="loading your dashboard" />props
| prop | type | default | notes |
|---|---|---|---|
| label | string | — | what is being waited on. omit it only when the surrounding page already says. |
| variant | "ring" | "dots" | "bars" | "orbit" | "ring" | the Spinner it centres. the whole Spinner vocabulary is available here. |
| size | "sm" | "md" | "lg" | "lg" | spinner scale. lg is the route-level default, sm suits a panel. |
| tone | "accent" | "current" | "accent" | current inherits the surrounding ink, for a loader inside tinted chrome. |
get it
bun add @usva-ui/reactusage
import { PageLoader } from "@usva-ui/react/primitives/spinner";
<PageLoader label="loading your dashboard" />