Story · Templates

Empty, Loading & Error States

Every screen owes these seven states. They are the ones mockups skip and engineering ends up inventing under deadline — which is how two screens in the same product end up disagreeing about what "no data" means. Copy the block you need; the caption under each is the rule.

Nothing to show

Empty — first runno data yet

No invoices yet

Vendor invoices appear here once they're received or uploaded. Nothing has come in for this job.

Rule: explain what will appear and give the action that creates the first one. Never just "No data."
Empty — filteredno results

No invoices match these filters

No results for "meridian" with status Overdue in July 2026.

Rule: distinct from first-run. Echo the active filters back and offer to clear them — the data may exist just outside the query.
Empty — all clearwork finished

Nothing awaiting approval

All 14 invoices for this period are approved and synced to QuickBooks. Next sync runs at 6:00 PM.

Rule: an empty queue is a success, not a void. Say what was completed and what happens next.
Loading — skeletonfirst paint
Loading invoices…
Rule: match the skeleton to the real layout so nothing jumps on load. Spinners only for actions under ~1s; skeletons for content.

Something went wrong

Error — load failedretryable

Couldn't load invoices

The request timed out. Your data is safe — nothing was changed.

Rule: say what failed, reassure that nothing was lost, and lead with retry. Never surface a stack trace or raw status code to a business user.
Error — not permittednot retryable

You don't have access to payment details

Viewing bank and payment records requires the Controller role. Your role is Project Manager.

Rule: no retry button — retrying can't help. Name the required role and give the path to get it.
Degraded — partial datastale but usable
VendorInvoiceStatusAmountAs of
Meridian Electric#INV-8836Overdue$6,885.002:02 PM
Coastal Lumber#INV-8841Due Fri$18,240.002:02 PM
Northgate Drywall#INV-8858Awaiting$11,400.002:02 PM
Rule: the hardest state to remember and the most common in an integrated system. Keep the data on screen, mark how stale it is, and never let a sync failure look like a zero balance. Decide this per screen: if stale numbers could drive a payment decision, block the action instead of just warning.