A 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.

WebBetaFeedback

Web only — React, from @krizaka/ui/loader. Beta: its API may still change in a minor version.

When to use

Any wait whose length you do not control (a fetch, a refresh): the delay keeps fast answers from flashing a spinner.
A wait that ends in a result worth saying — “12 invoices loaded”, “Could not publish”.
Over a region that stays readable while it refreshes (variant="overlay"), or over the whole screen at start-up (page).
LoadingRegion for a card, a list or a panel: a skeleton of its shape while it loads, words when it lasts.

When not to use

Inside the button that started the action: the button draws the same glyph.Use instead: Button
For a long task with steps or a known size the user follows.Use instead: Progress
A tiny wait glyph with nothing else.Use instead: Spinner

Installation

Install

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

Styles

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

Import

import { Loader, LoadingRegion, useDelayedWait } from "@krizaka/ui/loader";

Examples

No flash, then a result

A fast answer shows nothing; a slow one shows the wait, then “12 invoices loaded” with a check, then nothing.

Hand-over to a skeleton

LoadingRegion: a skeleton of the card's shape, words when it lasts, the card fading in.

Eric Moreau

1,204 supporters

Progress and ETA

value and eta: the trace grows, the percentage and the time left read in tabular figures.

Over a region

variant="overlay": the report stays readable behind frosted glass while it refreshes.

Monthly report

Revenue, supporters and payouts for October.

Endings

status: a success and a failure, drawn in their colour and said in words.

Published

Could not publish — check your connection

Minimal

A label, nothing else: the defaults do the rest.

Props

Loader

A wait, from start to end. role="status" (polite): its words are announced when it shows and when it ends. Under prefers-reduced-motion the glyph rests on a still frame; the delay and the ending stay.

Prop	Type	Default	Description
`label`required	`string`	—	What is loading, in words (“Loading your invoices”) — passed translated; shown and announced.
`delay`	`number`	`250`	Milliseconds before anything shows: a wait shorter than this never flashes.
`endDuration`	`number`	`1600`	Milliseconds the ending (check or cross) stays before the loader disappears; `0` never shows it, `Infinity` keeps it.
`errorLabel`	`string`	—	The words of a failure (“Could not load the invoices”) — passed translated.
`eta`	`string`	—	The time left, in words (“About 20 s left”) — passed translated (`@krizaka/intl` formats durations).
`minDuration`	`number`	`600`	Once shown, the least milliseconds it stays: it never blinks.
`status`	`"success" \| "loading" \| "error"`	`loading`	loading · success · error. When the wait ends, the loader shows how it ended for `endDuration` ms, then disappears.
`successLabel`	`string`	—	The words of a success (“Invoices loaded”) — passed translated. Default: nothing more than the check.
`value`	`number \| null`	—	Between 0 and 1: a determinate wait — the trace grows to it and the percentage shows.
`variant`	`"inline" \| "page" \| "overlay" \| "block"`	`inline`	inline (beside the content) · block (a region's centre) · overlay (over a `relative` parent, frosted) · page (the whole screen).

LoadingRegion

A region that hands over: its content → (after delay) a skeleton of the same shape → (after slowAfter) words over the skeleton → its content again, fading in. aria-busy while it waits; the wait is announced once.

Prop	Type	Default	Description
`label`required	`string`	—	What is loading, in words — passed translated; announced when the wait shows.
`loading`required	`boolean`	—	Whether the content is on its way.
`skeleton`required	`ReactNode`	—	What stands in while it loads: skeletons the shape of the content (no layout shift when it arrives).
`delay`	`number`	`200`	Milliseconds before the skeleton shows: a fast answer goes straight to the content.
`minDuration`	`number`	`500`	Once shown, the least milliseconds the skeleton stays.
`slowAfter`	`number`	`4000`	Milliseconds of skeleton before the words of a long wait appear over it.
`slowLabel`	`string`	—	The words when the wait grows long (“Still loading — the server is busy”) — passed translated.

Accessibility

role="status" (polite) is present from the first render, so its words are announced when the wait shows and again when it ends.
LoadingRegion sets aria-busy on the region while it waits; the skeleton is hidden from assistive technology and the wait is announced once.
Under prefers-reduced-motion the glyph rests on a still frame and endings do not animate; the delay, the words and the announcements stay.

Best practices

Say what is loading (“Loading your invoices”), not “Loading…”; say how it ended with successLabel / errorLabel.
Keep the defaults: 250 ms of delay, 600 ms at least once shown — the two numbers that stop flicker.
Give an eta when you can estimate it (format durations with @krizaka/intl): a known wait feels shorter.
With LoadingRegion, draw the skeleton the shape of the content: nothing moves when it arrives.

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