LoadingState

LoadingState is a full-region blocking loading indicator: a centred spinner (optionally labelled) filling a minimum height. Prefer SkeletonText/SkeletonRow for in-place loading inside content that's already on screen - reach for LoadingState only when the whole region has nothing else to show yet.

Loading materials

Usage

import { LoadingState, LoadingStateMinHeight, LoadingStateProps } from "@instruments/materia-ui/compositions/loading-state";

Best practices

Reserve LoadingState for a whole region / page with nothing to show yet; for in-place loading over existing layout prefer Skeleton, and a small inline spinner is Spinner.
Pass label to name the live region for AT; it already renders aria-live="polite" with a default "Loading" name, so don't add your own status role.

Props

Prop	Type	Default	Description
minHeight	`"screen" \| "40vh" \| "60vh"`		Minimum height of the centred region. Defaults to "60vh".
label	`string`		Loading message rendered next to the spinner and used as the region's accessible name (via aria-label). Omit for a spinner-only block - the region still announces a default "Loading" name.

Also exports

typeLoadingStateMinHeight
interfaceLoadingStateProps

Composition

Builds on

Center, Spinner, Text