Signals an indeterminate wait: a spinner, dots, a pulse, bars, a matrix or a shimmer.
<Loading label="Loading findings" />pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
Import Loading once, then compose its parts with dot notation.
Loading.ScreenSix ways to draw a wait, each for a different kind of work.
import { Stack } from '@usefragments/ui';
<Stack direction="row" gap="xl" align="center" wrap>
<Loading delay={0} label="Loading findings" />
<Loading kind="dots" delay={0} label="Writing a reply" />
<Loading kind="pulse" delay={0} label="Listening" />The shimmer names the step; it changes as the work moves on.
<Loading kind="shimmer" delay={0} label="Searching 214 files for raw colour values…" />Dots where the reply will appear, until its first words arrive.
import { Message } from '@usefragments/ui';
import { Stack } from '@usefragments/ui';
<Stack gap="md">
<Message from="user">
<Message.Content>Which screens still use raw colours?</Message.Content>A pulse while a session listens, bars while a voice comes in. The status names the state, so the visible words are hidden from screen readers.
import { Stack } from '@usefragments/ui';
import { Text } from '@usefragments/ui';
<Stack gap="sm">
<Stack direction="row" gap="sm" align="center">
<Loading kind="pulse" delay={0} label="Listening" />The matrix while a build or a generated screen comes together: light crosses the grid until the result replaces it.
import { Stack } from '@usefragments/ui';
import { Text } from '@usefragments/ui';
<Stack direction="row" gap="sm" align="center">
<Loading kind="matrix" delay={0} label="Generating the settings screen" />
<Text color="secondary" aria-hidden="true">Generating the settings screen</Text>Sized to the text it sits in.
<p>
Checking the request <Loading inline label="Checking the request" />
</p>Fills the slot the result will take and centres in it.
<div style={{ height: 120 }}>
<Loading fill label="Loading the chart" />
</div>The whole view is waiting on first paint.
<Loading.Screen label="Opening the workspace" showLabel />Prop | Type | Default | Description |
|---|---|---|---|
delay | number | undefined | 1000 | Milliseconds of quiet before the spinner shows; 0 when the caller already waited |
fill | boolean | undefined | false | Fill the parent and centre the spinner in it |
inline | boolean | undefined | false | Size the spinner to the surrounding text (1em) so it sits inside a line |
kind | LoadingKind | undefinedspinnerdotspulsebarsmatrixshimmer | spinner | How the wait is drawn: spinner where a result will appear, dots while a reply is written, pulse while something live listens or connects, bars while a stream or voice comes in, matrix while work is assembled, shimmer shows the label with the working sheen |
label | string | undefined | "Loading…" | What is loading, read by screen readers |
Screen.delay | number | undefined | Not set | Milliseconds of quiet before the spinner shows. |
Screen.label | string | undefined | Not set | What is loading. |
Screen.showLabel | boolean | undefined | Not set | Show the label under the spinner as well as reading it. |