components/bits/Spinner#

LoadingBlock()#

function LoadingBlock(props): Element;

A centered page/panel spinner with optional copy — the "whole region is loading" shape that was hand-rolled as a flex Box around a CircularProgress in dozens of places.

Prefer SkeletonList when the shape of the incoming content is known; a skeleton tells the user more than a spinner does.

Parameters#

Returns#

Element

Spinner()#

function Spinner(props): Element;

The app's single busy indicator.

Replaces raw <CircularProgress> at call sites: the size comes from a named variant instead of a magic number, and the colour defaults to something correct for the context rather than to MUI's primary on top of a coloured button.

Parameters#

Returns#

Element

LoadingBlockProps#

Properties#

fill?#

optional fill?: boolean;

Fills the parent instead of sitting at its natural height.

message?#

optional message?: ReactNode;

Text under the spinner. Say what is loading, not just "Loading…".

sx?#

optional sx?: any;

SpinnerProps#

Properties#

color?#

optional color?: 
  | "inherit"
  | "primary"
  | "secondary"
  | "success"
  | "error"
  | "warning"
  | "info";

Colour source. inherit (the default for inline/button) takes the colour of whatever contains it, which is the only correct answer inside a contained Button. page defaults to primary.

label?#

optional label?: string;

Screen-reader label. Always set one when the spinner is the only content.

sx?#

optional sx?: any;

value?#

optional value?: number;

Determinate progress, 0-100. Omit for the indeterminate spinner.

variant?#

optional variant?: "button" | "page" | "inline";

SpinnerVariant#

type SpinnerVariant = keyof typeof SIZES;