Loading States

Overview

Loading states tell users something is happening and the app hasn’t stalled. Use them to set expectations while we load content, complete an action, or finish a process.

Pick a pattern based on:

How long it will take
Whether we’re retrieving data or processing it
Whether the user can safely cancel or leave

Driveway Patterns

Initial page load: header + footer render first, with a spinner in the main content. Once data begins to hydrate, the main area typically transitions to skeleton loading for the content layout.
Tier 2 (3–10s) processing: a couple flows use a vehicle animation for waits in the 3–10 second range to make the delay feel intentional.
Tier 1 (0–3s) actions: use button-level loading spinners for quick user-initiated actions.

Tier	Typical duration	Best for	Recommended patterns	Can users leave?
1	0–3 seconds	Quick UI feedback	Button loading, inline spinner, skeleton loader	Yes
2	3–10 seconds	Noticeable wait	Skeleton loader, progress indicator, loading message	Sometimes (if safe)
3	10–60 seconds	Multi-step / heavier processing	Dedicated loading screen, progress indicator, status messaging	Depends (often no)
4	60+ seconds	Long-running jobs	Full processing experience, background processing, completion notification	Prefer yes (background)

Scope (Where It Appears)

Scope	What it affects	Use when	Common patterns
Inline	One control or element	A single action is running	Button loading, inline spinner
Section	One region of a page	Content is updating in place	Skeletons, local spinner, “Updating…” message
Page	The whole view	The page can’t be used until it loads	Page skeleton, page loading state
Full-screen processing	The whole experience	Processing is critical or risky to interrupt	Dedicated loading screen, progress + status messaging

Tiers (By Duration)

Tier 1: Immediate (0–3 seconds)

Use small, lightweight indicators for quick actions like saving, filtering, and navigation.

Best patterns: button loading, inline spinner, skeleton loader
Don’t: block the full screen, show a progress bar, or use a fullscreen overlay

Overview

Driveway Patterns

Scope (Where It Appears)

Tiers (By Duration)

Tier 1: Immediate (0–3 seconds)

Tier 2: Short (3–10 seconds)