Loading indicator

Usage

Overview

LoadingIndicator signals that work is in progress—GraphQL fetches, report generation, attachment uploads. It answers "is anything happening?" without blocking the whole shell unless the operation truly requires it. Pair with a skeleton for longer waits to preserve layout stability; a spinner alone on a blank region undermines perceived performance compared to a skeleton that hints at the incoming shape.

When to use

Inline fetches in buttons, cards, or table footers where duration is uncertain but short-to-medium.
Full-region loading when content can't render meaningfully and a skeleton is unavailable.

When not to use

Sub-200ms operations where the spinner flashes. Omit or debounce display.
Determinate processes with a known progress value—use Progress.
Background tasks better surfaced through a Snackbar completion toast.

Sizes

Small inline with text or in table cells.
Regular default for page regions.
Large hero loading for dashboards where the spinner is the only visual.

Content guidelines

Accompanying text names the task ("Loading incidents…") and updates for multi-step flows. Localize via formatMessage.

Behavior and states

Show once the wait threshold passes; hide promptly on completion to avoid flicker loops.
On failure, transition to a Banner or field errors; don't spin indefinitely.

Best practices

Align spinner placement with where content will land, to minimize layout shift on resolve.
Keep dashboard spinners subordinate—covering an entire incident console is a last resort.

Don't

Stack multiple large spinners in one viewport. Consolidate status.
Use animated spinners for prefers-reduced-motion users without swapping to a static busy indicator per the implementation.

Accessibility

Expose aria-busy on relevant regions; announcements should be polite, not chatty under fast polling. See Accessibility for the full contract.

Skeleton for layout-preserving loads.
Progress for determinate operations.
Button for in-button loading states.

Loading Boundary / Accessibility

Loading Indicator / API and Development

On this page

Loading indicator

Usage

Overview

When to use

Inline fetches in buttons, cards, or table footers where duration is uncertain but short-to-medium.
Full-region loading when content can't render meaningfully and a skeleton is unavailable.

When not to use

Sub-200ms operations where the spinner flashes. Omit or debounce display.
Determinate processes with a known progress value—use Progress.
Background tasks better surfaced through a Snackbar completion toast.

Sizes

Small inline with text or in table cells.
Regular default for page regions.
Large hero loading for dashboards where the spinner is the only visual.

Content guidelines

Accompanying text names the task ("Loading incidents…") and updates for multi-step flows. Localize via formatMessage.

Behavior and states

Show once the wait threshold passes; hide promptly on completion to avoid flicker loops.
On failure, transition to a Banner or field errors; don't spin indefinitely.

Best practices

Align spinner placement with where content will land, to minimize layout shift on resolve.
Keep dashboard spinners subordinate—covering an entire incident console is a last resort.

Don't

Stack multiple large spinners in one viewport. Consolidate status.
Use animated spinners for prefers-reduced-motion users without swapping to a static busy indicator per the implementation.

Accessibility

Expose aria-busy on relevant regions; announcements should be polite, not chatty under fast polling. See Accessibility for the full contract.

Skeleton for layout-preserving loads.
Progress for determinate operations.
Button for in-button loading states.

Loading Boundary / Accessibility

Loading Indicator / API and Development

On this page