Components

Skeleton & Spinner

Placeholders for content on its way.

Import

import { Skeleton, Spinner } from '@rinzai/zen';

Examples

API reference

<Skeleton>

Shimmering placeholder in the shape of content that's on its way. Size it with className.

Give it the content as its child and loading: the placeholder shows while loading, then the content fades in where it was.

Prop	Type	Default
`children` The content this stands in for, a single element.	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	`—`
`loading` With children: show the placeholder instead of them while true.	`boolean`	`—`

<Spinner>

Small circular spinner in the current text colour; size it with className (default size-4). Decorative by default (e.g. inside a loading Button). Give it a label when it stands on its own, and screen readers announce it.

Prop	Type	Default
`label` What is loading, e.g. "Loading entries". Makes the spinner announce itself.	`string`	`—`

Zen