# Loading

Chooses the indicator for a wait and sets what happens as the wait grows, when it fails, when it partly fails and when the reader is offline.

* Kind: pattern
* Page: https://design.werklist.com/patterns/loading
* Version: 2.1.2

## When to use it

* A page or a panel that opens
* An action that waits on the server
* Imports and uploads
* A slow network, and offline

## When not to use it

* A lone spinner for a page load
* Blocking the page for one panel
* More than one indicator for one action

## Rules

* A page or a panel shows its skeleton from the first frame.
* A button stops taking presses at once. Its spinner appears after one second.
* A list that loads more rows shows a 20 px spinner in its footer.
* Work of known size shows a progress bar with counts, where the work started.
* Work that outlasts the page keeps its bar and ends with a toast if the reader is still in the module, or a notification if not.
* After 10 seconds the skeleton stays, and a neutral inline message above the content says what is still loading. It leaves when the content arrives.
* A failed request shows the error in place with Try again.
* A partial failure keeps what arrived and shows a warning band with Try again.
* Offline, the page keeps what it has and says so in a neutral band. Actions that need the network wait and run when it returns, or say that they cannot.
* Focus never moves because content arrived.

## Accessibility

* The loading region is marked busy with aria-busy.
* Each region says one visually hidden status sentence, once: 'Loading candidates'.
* A wait started with a button is carried by the button's busy state.

## Content

* Name what is loading: 'The board is still loading. Your connection may be slow.'
* Offline: 'You are offline. Some actions wait until the connection is back.'
* Partial: 'Some notifications did not load.' with Try again