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.
Reset zoom to 100%
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
Do
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.