Loading State
Two variants for communicating async work: a centered spinner for initial loads, and skeleton rows for content-shaped placeholders.
Loading members…
import { LoadingState } from "@aetherstack/patterns"
Installation
terminal
npx aether-ui add loading-stateImport
import.tsx
import { LoadingState } from "@aetherstack/patterns"Usage
loading-state.tsx
// Spinner (default)
<LoadingState text="Fetching data…" />
// Skeleton rows
<LoadingState variant="skeleton" rows={5} />
// Custom text
<LoadingState text="Saving changes…" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "spinner" | "skeleton" | "spinner" | Display style. |
| rows | number | 4 | Number of skeleton rows. Only used when variant="skeleton". |
| text | string | "Loading…" | Screen reader label and visible caption for the spinner variant. |
| className | string | — | Additional classes on the wrapper. |
* Required
Accessibility
- →The wrapper has aria-busy="true" and aria-label set to the text prop — screen readers announce loading state.
- →Use variant="skeleton" when the content shape is known — it reduces layout shift on resolve.
- →Do not leave the page interactive while LoadingState is shown — disable relevant controls.