Skeleton

Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.

Why it is here. Used by Orochia, Orazaka.

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { Skeleton, SkeletonText, SkeletonShape } from "@krizaka/ui/skeleton";

Examples

Props

Accessibility

• Decorative and hidden from assistive technology: announce the wait elsewhere (aria-busy on the region, a Spinner).
• SkeletonShape is also inert: the placeholder component can hold no focus.
• The reflection stops under prefers-reduced-motion: the shapes rest, tinted.

Best practices

• Best: SkeletonShape around 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.

Related components

• LoaderA wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and LoadingRegion, which hands a region over to a skeleton of its shape.
• SpinnerThe Krizaka spinner: light traced around a hexagon, its node breathing — indeterminate, or growing to a value; still and legible under reduced motion.
• Empty stateWhat a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.
• CardThe composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub