Empty States & Loading

Overview

Every list, feed, table, and search result has four non-happy states — first-use, cleared, no-results, and error — and each needs a distinct design; a blank screen is a bug. Loading UX is about perceived speed: pick the indicator by expected wait time, not by habit.

When to Use

• Building any view backed by a collection, query, or remote fetch
• Choosing between skeleton, spinner, progress bar, or optimistic update
• Reviewing "app feels slow" feedback or layout shift during load
• Auditing a design that only shows the populated happy path
• Handling offline, failed-fetch, and stale-data presentation
• NOT for: static content pages that can't be empty
• NOT for: animation curves/durations in general (motion skills) — this covers which state to show and when

The Proven Flow