Pattern

Loading, empty, error, offline and stale

What a screen shows while it loads, when it is empty, when it fails, offline and when data is stale.

Rules

  • First loads show skeletons shaped like the final layout; spinners are only for buttons and background sync.
  • Empty states say what will appear and give one next action.
  • Errors keep what was typed, say what happened in plain words, and offer Try again. Staff see a correlation ID; patients never do.
  • Offline: content stays visible with its "Updated" time, request tiles are disabled, and nothing is queued. The "I feel worse" instruction still renders.
  • Paused feeds show updates.paused over the last content and nothing else changes.

Live examples

Skeleton · Loading placeholders shaped like what is coming.
Empty state · What will appear here, and what to do next.
Error state · A calm failure with a way forward.
Banner · Department load, offline, stale, paused, maintenance and announcements.