Empty, loading & error states
Every screen spends part of its life with nothing to show, waiting for data, or recovering from a failure. These are the states of the Northwind Ops screens, built from the same parts as the loaded views — so the app keeps its shape and its tone when things are not going to plan.
Empty states
Say what belongs here, why it is empty and what to do next — one primary action at most. Illustrations are ThemeIcons with Tabler icons, never images.
Purchase orders
No purchase orders yet
Create your first order to start tracking spend, approvals and deliveries in one place.
New to approvals? Read the 3-minute guide
ThemeIcon size={56}, an h4, one sentence on what the page is for, the ink CTA and a secondary variant="default" path.No results for “zephyr”
No shipped orders match. Check the spelling or clear the filters.
Pills and offers one way out. Clear the filters — the rows come back; search for something else and it returns.You don’t have access to Finance reports
Reports are limited to the Finance and Administrator roles. Your role is Viewer.
Workspace admin: Amelia Hart
gray icon — it is not an error. The primary action asks; the secondary leaves.Harbor Office Supply
Archived on 24 Oct by Amelia Hart. It is hidden from new orders.
Alert with the one action that undoes it, above the record rendered readOnly — values stay legible, nothing is editable.Comments
No comments yet
Start the conversation about this order.
Attachments
Drop files here or
PDF, PNG or XLSX up to 10 MB
--ds-gray-300 drop target (core has no Dropzone; this is composed) with a browse link.Approval time
—
Not enough data yet
Trends appear after 5 approved orders.
Loading skeletons
Skeletons mirror the layout they stand in for, so the page does not jump when data arrives. Use the toggles to compare each skeleton with its loaded screen.
Purchase orders · first load
Skeleton bars: circles for avatars, 20px squares for the default-size checkboxes, pills for badges, short right-aligned bars for amounts. Switch to Loaded — nothing shifts.Suppliers
PO-2041
Atlas Packaging
Packaging
$12,840
PO-2040
Keystone Logistics
Freight
$48,200
PO-2039
Brightline Electrical
Facilities
$3,150
PO-2038
Meridian Foods
Catering
$7,425
Skeleton visible={loading}, so the placeholder takes the exact size of the content it stands in for.Edit PO-2041
radius="sm") in the same two-column grid; buttons become pill-shaped bars.Inline loading
When part of a screen is busy, show it on that part — a button, a field, a card — and leave the rest usable.
All changes saved · just now
Checking availability…
loading keeps the button's width and disables it; a Loader size="xs" in rightSection marks a field that is validating or fetching options. Press Save.LoadingOverlay with overlayProps={{ blur: 2 }} on a pos="relative" card — the old content stays in place while it refreshes. Press Refresh.Exporting purchase orders
82 of 128 · about 20 seconds left
invoice-PO-2041.pdf
2.4 MB
78%
delivery-note.png
840 KB
rates-q4.xlsx
1.1 MB
Upload failed
Progress with a count, per-file bars, a green done state and a red failed state with its retry.Errors & offline
Explain what went wrong in plain words, say whether anything was lost, and give the one action that fixes it.
Purchase orders
Couldn’t load purchase orders
The server didn’t respond in time. Nothing was lost — try again in a moment.
504 Gateway Timeout · req_8f2a91c4
ThemeIcon, a plain-language cause, reassurance, and Try again with its own loading state. The request id is in mono for support. Press it.We couldn’t find PO-9999
It may have been deleted, or the link is mistyped. Orders you can see are listed on the Purchase orders page.
Error 404 · /orders/PO-9999
Edit PO-2041
- Amount is above your $10,000 approval limit.
- Due date must be after today.
Above your $10,000 limit
Must be after today
Alert at the top summarises what failed server-side; each field repeats its own error. Fix the amount and save to clear it.Changes are kept on this device and sync when you reconnect.
PO-2041, PO-2038 and PO-2035 were not saved to the ERP.
Save your work or stay signed in.
All changes are synced.
Alerts for connection, sync and session state: the built-in hues map to warning / danger / info / success, each with an icon and at most one action.Northwind Ops
/
Purchase orders
You can keep working. 2 changes will sync when the connection returns.
Purchase orders
Atlas Packaging
PO-2041 · updated just now
$12,840
Keystone Logistics
PO-2040 · updated just now
$48,200
Brightline Electrical
PO-2039 · updated Yesterday
$3,150
Meridian Foods
PO-2038 · updated 26 Oct
$7,425
Pending sync badge so the user knows what is unsaved.Success
Confirm what happened and what comes next, then get out of the way.
Purchase order submitted
PO-2042 is waiting for approval from Priya Raman. We’ll email you when it’s decided.
- Supplier
- Atlas Packaging
- Amount
- $18,450
- Approver
- Priya Raman
- Expected decision
- Within 1 business day
ThemeIcon check, what happened and who acts next, a summary of what was submitted, then the two likely next moves.Supplier onboarding
Onboarding complete · Atlas Packaging can receive orders.
Month-end checklist
Alert after a save, a completed Stepper, and a checked task list — success never needs a modal.Toasts
Short-lived confirmations for actions taken elsewhere on the page, with at most one action each.
Purchase orders
| Order | Supplier | Owner | Status | Amount |
|---|---|---|---|---|
| PO-2041 | Atlas Packaging | Daniel Osei | Pending approval | $12,840 |
| PO-2040 | Keystone Logistics | Priya Raman | Approved | $48,200 |
| PO-2039 | Brightline Electrical | Marco Silva | Draft | $3,150 |
| PO-2038 | Meridian Foods | Daniel Osei | Shipped | $7,425 |
| PO-2037 | Cobalt IT Services | Amelia Hart | Approved | $21,600 |
Harbor Office Supply · $980
64% · about 20 seconds left
Keystone Logistics has been notified.
Notification withBorders stacked bottom-right, newest at the bottom, four at most. Toasts carry one inline action — Undo, Retry — and progress toasts can’t be dismissed. @mantine/notifications is not in the kit; this is the composed equivalent.