LoadingOverlay
Feedback

LoadingOverlay

Covers a region while its data is in flight, keeping the layout already on screen.

Component behavior

LoadingOverlay covers existing content during a refresh. The content remains mounted and retains its scroll position. Use Skeleton to display placeholders before content loads.

Use cases
  • Re-fetching a panel, table or card that is already on screen.
  • Applying a filter or a date range to data already rendered.
  • Loading states that must preserve the current layout.
Alternatives

Skeleton: the content has not loaded previously.

Spinner: one control is loading.

ProgressBar: the operation provides measurable progress.

Props

LoadingOverlay extends HTMLAttributes<HTMLDivElement>.

LoadingOverlayProps props
PropTypeDefaultDescription
loadingbooleantrueWhether the overlay is showing.
labelReactNode—Text beside the spinner. Say what is loading, not that it is.
toneSpinnerTone"primary"Tone of the spinner.
sizeSpinnerSize | number"md"Spinner size.
blurboolean—Blurs the content underneath as well as dimming it.
delaynumber120Milliseconds to wait before appearing, so a fast response never flashes chrome.
childrenReactNode—The region to cover. Omit it to position the overlay yourself.

Examples

Wrapping a region

Pass the region as children and the overlay handles the positioning: it renders a relatively-positioned host, marks it aria-busy, and covers it.

LoadingOverlay (live)

Blurred

LoadingOverlay blurred

Positioning it yourself

Without children, the overlay covers the nearest positioned ancestor. Use this form when an existing wrapper already defines the loading region.

StandaloneTSX
<Box position="relative">
  <Chart data={points} />
  <LoadingOverlay loading={isFetching} label="Loading series…" />
</Box>
ImportTSX
import { LoadingOverlay } from "@solarius/onset";

<LoadingOverlay loading={isFetching} label="Refreshing…">
  <DataGrid rows={rows} columns={columns} />
</LoadingOverlay>;

See Skeleton for first loads and Spinner for single controls.