Skip to content
Saeede Agahi

Loading, empty and error states

Pattern for loading, empty and error states.

Problem

Data views fail in many ways. A spinner or a blank area doesn't tell people what's happening or what to do.

Solution

Show a skeleton on first load, so the layout doesn't jump. When data refreshes, keep the data on screen. Tell “no data yet” apart from “no results”, and offer “Clear filters” for the second. When something fails, say what failed and offer retry, and keep any data that did load.

Components used

  • Skeleton inside LoadingArea: the first load
  • EmptyState: no data yet, no results, and errors (with the negative tone)
  • Button: Try again and Clear all filters

Accessibility

  • LoadingArea marks the area as busy and says "Loading" plus what is loading, once, through a status message.
  • Skeletons are hidden from screen readers. Their pulse stops when reduced motion is on.
  • EmptyState titles are real headings. Pick the heading level that fits the page.
  • In the risk alert table, when filters match nothing, the empty state offers "Clear all filters", which brings the rows back.
  • After "Try again", the table loads and focus moves to the table, so keyboard users keep their place.
  • Automated tests check all of the above, and run axe on the loading, empty, error and no-results states in both themes.