Skeleton
A placeholder the shape of what is loading — lines, circles, blocks, or the real component turned into its own skeleton (SkeletonShape) — crossed by one reflection of the brand light.
Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orochia, Orazaka.
Quand l’utiliser
- While a list, a card or a profile loads, in its final layout: the page does not jump when it arrives.
Quand ne pas l’utiliser
- For an action the user is waiting on (a save).À la place : Spinner
- When there is nothing to load.À la place : Empty state
- For the progress of a task.À la place : Progress
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { Skeleton, SkeletonText, SkeletonShape } from "@krizaka/ui/skeleton";Exemples
The shape of the content
SkeletonShape around the real card with placeholder words, above the loaded card: the same layout.
Eric Moreau
1,204 supporters · Paris
A paragraph
A title and SkeletonText: lines that wrap, one reflection across them all.
Text
A line of text.
Circle
An avatar.
Rect
A media or a block.
Composition
Shapes composed into a card being loaded.
Props
Skeleton
A shape the size of what is loading. Announce the wait elsewhere (LoadingRegion does it, with aria-busy).
| Prop | Type | Défaut | Description |
|---|---|---|---|
shape | "text" | "circle" | "rect" | text | text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height). |
SkeletonText
A paragraph on its way: lines lines, the last one shorter — like text that wraps.
| Prop | Type | Défaut | Description |
|---|---|---|---|
lines | number | 3 | How many lines. |
Accessibilité
- Decorative and hidden from assistive technology: announce the wait elsewhere (
aria-busyon the region, aSpinner). SkeletonShapeis alsoinert: the placeholder component can hold no focus.- The reflection stops under
prefers-reduced-motion: the shapes rest, tinted.
Bonnes pratiques
- Best:
SkeletonShapearound the real component with placeholder words — its exact layout, nothing to keep in sync. - Otherwise compose the shapes like the content: an avatar circle, two lines (
SkeletonText), a media block. - Let
LoadingRegion(@krizaka/ui/loader) decide when to show them: after a short delay, with words when the wait lasts. - Show skeletons only after a short delay on fast connections, and never for more than a few seconds without a message.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub