Loading. Empty. Error. All three, on every list.
Three states ship together or the surface is unfinished. Loading is a warm-cream skeleton in the shape of the coming content. Empty is left-aligned, one sentence, ghost link. Error is a quiet notification row, never a centered red banner.
Orders list, three states.
The chrome (header, columns, pagination) stays. Only the body changes.
When your store syncs, orders appear here within a minute.
Couldn't load orders.
The sync service returned 503.
Marketplace integrations, three states.
Browse the marketplace for shipping, payments, and analytics integrations.
Couldn't load integrations.
Check your connection, or contact support if this persists.
On mesh, the states keep the surface.
Loading is a slow shimmer in white-opacity. Empty and error stay direct.
Nothing to suggest right now.
The next signal will appear here when your inbox or chargeback queue moves.
Couldn't reach the model.
Retry in a minute. Drafts remain unchanged.
Four rules so the three states ship together.
Every list has three states.
Loading, empty, and error are required, not optional. If a collection surface ships with only the happy path, it is unfinished.
Empty is editorial, not decorative.
No centered illustrations, no big primary CTAs, no exclamation points. Left-aligned title, one sentence, ghost-link action. The state reads as a calm note, not a marketing card.
Skeleton in warm neutral.
Skeletons use Mist, not Arc-tint. A lavender placeholder reads as AI accent against the Glacier canvas; the editorial answer is a warm-cream pulse that blends with the surface.
Error names cause and action.
An error states what failed (cause) and the one thing the operator can do (action). 'Oops, something went wrong' fails both tests.