docs / core / skeleton-mirror
skeleton-mirror
wrap your real markup and it greys every leaf into a shaped block, so the placeholder is the layout, not an approximation of it. flip loading to false and the children render untouched.
intensity · recedesrsc · server
provenance
authored in usvalayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
around any component, usva or your own, while its data loadstoggle loading straight from the same boolean that fetchesnot for a bespoke placeholder. hand-build those with Skeletonnot a spinner. it promises the shape of what is cominga11y
a labelledrole="status" region · the greyed markup is aria-hidden · the sheen stops under reduced motionjest-axedependencies
Skeleton from the same packageSkeletonMirror
real
Aino VirtanenProduct designer
A short caption describing the item, its state, and one more line of supporting detail so the block has some height.
OpenShare
<SkeletonMirror>
Loading
props
| prop | type | default | notes |
|---|---|---|---|
| loading | boolean | true | false renders the children untouched. |
| label | string | "Loading" | what screen readers announce for the status region. |
get it
bun add @usva-ui/reactusage
import { SkeletonMirror } from "@usva-ui/react/primitives/skeleton";
<SkeletonMirror loading={isLoading}>
<ProfileCard user={user} />
</SkeletonMirror>