Loading State

Shown in place of content while it loads: a spinner, what is loading and a way to cancel.

Stable

Web

iOS

Android

@advui/core

Source

Loading invoices…This can take a few seconds.

JSX

<LoadingState title="Loading invoices…" description="This can take a few seconds." />

PropsOpen in Playground

title

description

bordered

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { LoadingState } from '@advui/core'

<LoadingState
  title="Loading invoices…"
  description="This can take a minute."
  delay={300}
/>

Examples

Basic

Preview

Code

Loading invoices…This can take a few seconds.

With a cancel button

Preview

Code

Importing contacts…Adding 1,240 contacts. This can take a minute.

API reference

LoadingState

Prop	Type	Default	Description
`title`	`ReactNode`	`'Loading…'`	What is loading.
`description`	`ReactNode`	—	One sentence, such as how long it takes.
`delay`	`number`	`0`	Milliseconds before it shows, so fast loads do not flash a spinner.
`bordered`	`boolean`	`false`	Dashed border, for loading areas inside a page.
`children`	`ReactNode`	—	Actions, such as a Cancel button.

Accessibility

On web the title and description are a status region, so screen readers announce them politely, and again when they change (for example "Loading 3 of 10…").
With delay, the empty region is on the page first and the text is added to it, which screen readers announce more reliably than a new region.
The spinner is hidden from assistive technology because the text already says what is loading. Actions sit outside the status text and keep their own focus stop.

Platform notes

iOS

The text is one accessible element. Not announced automatically; announce it with AccessibilityInfo if needed.