---
id: "packages/active-ui/loading-screen"
title: "LoadingScreen"
description: "A centred spinner with a visible line for a local area that is loading, silent for its first 200 ms."
url: "/packages/active-ui/loading-screen"
locale: "en"
revision: "835fed4fbf25cdd7"
---

# LoadingScreen

`LoadingScreen` fills a local area that is still loading, such as a chart, a table block or a
panel, with a [spinner](/packages/active-ui/spinner) and a line of text. For a page or a dashboard
that is loading, use the [AppLoadingBar](/packages/active-ui/app-loading-bar) in the shell; for a
wait with a known amount, use [Progress](/packages/active-ui/progress).

**Example: A local area that is loading**

Client: Runs entirely in your browser. Source: `examples/ui/loading-screen.tsx`.

```tsx
// 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

```tsx
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 (`className`; the default minimum is `min-h-48`).

## API

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `label` | `string` | yes | The translated line below the indicator, for example `t('common.loading')`.  **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. |
| `className` | `string` | no | Placement and size, from the caller: `min-h-64` for a chart area with a known height, `mt-4` 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 `AppLoadingBar` instead. |

**LoadingScreenProps**

```ts
interface LoadingScreenProps {
  label: string;
  className?: string;
}
```