Skip to content
← Inventory

LoadingState

LoadingState is a full-region blocking loading indicator: a centered spinner (optionally labeled) 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 "@desk/ui/components/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

PropTypeDefaultDescription
minHeight"screen" | "40vh" | "60vh"

Minimum height of the centered region. Defaults to "60vh".

labelstring

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