Achilles — Shared UI: Loading and waiting

A vocabulary of waiting mechanisms inside a live screen: the mechanism fits the form of the wait, not the type of screen. A full collapse is a separate pattern, system stubs.

Which mechanism when

The content shape is known, the data is not yet there → skeleton
Content is already on screen, the slice changes → keep-previous
The area is tiny or the shape is unknown → spinner
The whole screen changes → a bar at the top
The request failed, the frame is alive → an inline error with retry

Skeleton — cold start → Web App

The frame right away, the body — placeholders in the shape of the coming content: swapping in the data causes no layout jump.

skeleton · cold start

achilles.local/admin/users first render · no data yet The frame and table header right away; the body — placeholders

Users

Name	Email	Role	Status	Last sign-in

Keep-previous — slice transition → Admin Panel

The previous rows are dimmed, a thin bar under the header; the new slice replaces them in place, without flashing to empty.

keep-previous · page transition

achilles.local/admin/users?page=2 content was already there · the next slice is arriving Previous rows dimmed, a bar on top, replaced in place

Users

Name	Email	Role	Status	Last sign-in
Anna Orlova	anna@company.com	Owner	active	5 min ago
Dmitry Sokolov	dmitry@company.com	Admin	active	yesterday
Igor Lebedev	igor@company.com	Member	active	3 days ago

Spinner — a small zone

A button in progress, an inline check, a short action in a modal. We do not load a whole list this way — that is skeleton.

spinner · button and small zone

Checking the connection…

Bar — the whole screen changes

A thin bar under the header while the next route loads. It lives at the shell level (layout), not on the content screens.

bar · transition between screens

achilles.local/admin/settings transition to a new route A bar under the header while the next screen loads

Inline error — retry

A block with the cause and “Retry” in the data area, the screen frame alive. A full collapse — a system stub; an invisible background failure — a toast.

inline error · retry

achilles.local/admin/users the request failed · the screen frame is alive The error in the data area, the rest of the screen in place

Users

Could not load the list The server did not respond. Check the connection and retry.

Rules

~200 ms threshold — we do not show an indicator if the response arrived faster: otherwise the screen would flash with a loader.
The frame does not jump — the heading, filters, and pagination render right away; only the data area changes.
Accessibility — the loading zone carries aria-busy, the inline error — role="alert", so a screen reader announces the state change.