LoadingScreen
A centred spinner with a visible line for a local area that is loading, silent for its first 200 ms.
Loading fills a local area that is still loading, such as a chart, a table block or a
panel, with a spinner and a line of text. For a page or a dashboard
that is loading, use the AppLoadingBar in the shell; for a
wait with a known amount, use Progress.
The chart appears here.
// apps/docs/examples/ui/loading-screen.tsx'use client';
import {useState} from 'react';
import {LoadingScreen} from '@workspace/active-ui/components/composed/loading-screen';import {Button} from '@workspace/active-ui/components/primitives/button';
/** * A local area that is loading: a spinner with a visible line, silent for * the first 200 ms. Load the chart to see it; the wait is a two-second * simulation. */export default function LoadingScreenExample() { const [loading, setLoading] = useState(false); const load = () => { setLoading(true); window.setTimeout(() => setLoading(false), 2000); }; return ( <div className="grid w-full max-w-md gap-4"> <Button variant="outline" className="justify-self-start" disabled={loading} onClick={load} > Load the chart </Button> <div className="rounded-md border"> {loading ? ( <LoadingScreen label="Loading the chart…" className="min-h-40" /> ) : ( <p className="text-muted-foreground flex min-h-40 items-center justify-center text-sm"> The chart appears here. </p> )} </div> </div> );}What the composition adds#
A visible word, so the state is not told by motion alone.
One announcement: the area is a polite status region named by its text, and the spinner stays decorative.
A silent start: it fades in after 200 ms, so a short wait does not flicker. With reduced motion it appears at once.
No skeleton: it predicts nothing about the content to come.
Usage#
import {LoadingScreen} from '@workspace/active-ui/components/composed/loading-screen';
<LoadingScreen label="Loading the chart…" className="min-h-64" />;What your application provides#
The text, translated, and the height of the area (
class; the default minimum isName min-).h- 48
API#
Import from @workspace/
Props
- Type
string
The translated line below the indicator, for example t('common..
Required, and visible. Colour and motion must never be the only carrier of a state (WCAG 1.4.1); a spinning icon without a word leaves a reader guessing whether something is loading or something is broken. The text is also the accessible name of the role="status", which lets the spinner itself stay decorative.
- Type
string
Placement and size, from the caller: min- for a chart area with a known height, mt- for the space around it. This prop is not there for meaning -- there is only one kind of wait.
There is deliberately no variant axis: a page or a dashboard waits with App instead.
Takes only the props listed.
Types
The props of Loading, each described in its prop list on this page.
interface LoadingScreenProps {
label: string;
className?: string;
}