Loading, empty, error, success
A blank white area is a bug. Every surface in ApexCommerce has a designed answer for “not yet”, “nothing here”, “something broke” and “done”. These four families are reused verbatim on all 150+ screens.
Loading & skeleton states
Skeletons mirror the final layout's exact box metrics so nothing shifts when data lands (zero CLS). Shimmer runs at 1.5s and is removed entirely under reduced motion. Spinners only for actions <2s; skeletons for content; progress bars for multi-step (payment).
Rule: the label stays (screen readers announce “Saving…”), width stays, and the button is non-interactive until the response resolves. Double-submit is impossible by construction.
Empty states
An empty state is a landing page for a first-time user: one friendly icon, one honest sentence, one primary action (and at most one secondary). Never blame the user; never show an empty table with only column headers.
Browse new arrivals or pick up where you left off — we saved your last 20 views for 30 days.
Tap the heart on anything you love and it'll wait for you here — price drops included.
Did you mean linen? Or try fewer words — “linen shirt” finds more than “white pure linen shirt men”.
When you place your first order it'll appear here with live tracking and one-tap returns.
1,284 orders exist — none are “Refunded” in “NT” this quarter.
Price drops, delivery updates and return statuses will land here.
Error states
Errors answer three questions in order: what happened, is my data/money safe, what do I do now. The recovery action is always the most prominent button.
The page may have moved, or the link has a typo. Your cart and session are untouched.
Our engineers were alerted automatically (ref se-2210). Nothing was charged and your cart is saved.
- Order reserved
- Payment attempt failed
- 3Awaiting retry
- Postcode must be 4 digits for VIC
- Card expiry is in the past
- Phone needs an Australian mobile number
The summary receives focus on submit, each link jumps to and focuses its field, and fields keep their values. Errors clear live as the user fixes them.
Success states
Success moments do two jobs: confirm, and route onwards. The confirmation is calm (green check, one line); the next step is the loudest thing on screen.
Order #APX-2026-08412 · a receipt is on its way to charlotte@example.com. Estimated delivery Thu 10 – Sat 12 Sep.
State matrix — every major page
The contract each screen signs before it ships. Phase 17 audits against this exact table.
| Surface | Default | Loading | Empty | Error | Success |
|---|---|---|---|---|---|
| Product grid | cards | card skeletons ×8 | no-results state | retry banner + cache | — |
| Cart | line items | row skeletons | empty cart | coupon/stock errors | added toast |
| Checkout payment | Stripe fields | indeterminate bar | — | decline + retry | order placed |
| Order tracking | timeline | timeline skeleton | unknown number | carrier outage | delivered confetti-free |
| Admin orders | table | row skeletons | filtered-empty | 500 + retry | status toast |
| Reviews moderation | queue table | row skeletons | queue clear 🎉 | bulk-action partial fail | approved toast |
| Profile save | form | button spinner | — | summary + inline | saved toast |