Feedback and loading
Licence issued
Every action gets an answer
People should never wonder whether something worked. Every click, save and AI task answers in a predictable way: instantly acknowledged, honestly in progress, clearly finished.
How long it takes decides the feedback
| Duration | Feedback | Component |
|---|---|---|
| < 100ms | Just the pressed state and the result | Button pressed state |
| 100ms – 1s | Pressed state; show a spinner only if it passes 300ms, to avoid flicker | Button loading state |
| 1 – 3s | Spinner in place of the content or in the button, with what is happening: “Saving…” | Spinner, dots |
| 3 – 10s | Indeterminate progress bar or skeleton, plus a status line | Progress (indeterminate), skeleton |
| > 10s | Determinate progress or named steps, time estimate, cancel, and the option to leave and be notified | Progress (determinate), stepper, agent activity |
| Minutes (AI analyses) | Run in the background with a status chip; notify on completion with a toast and a badge | Agent pulse, toast, count badge |
Instant feedback
Press, loading, success, failure
Couldn't reach NorthStar Admiral Server. Check your network, then try again.
- Press: 1px down shift and a darker fill within one frame.
- Toggle: the switch moves immediately (220ms) and applies; an error moves it back with a message.
- Busy button: spinner replaces the label, width stays, clicks are ignored (
aria-busy="true"). - Done: past-tense label with a check for 1.5s (“Sent”), then back to normal or the surface closes.
Waiting
Loaders
Uploading residency report0%
Shaheen is running 6 lenses
Step 3 of 5 · about 2 minutes · you can leave this page
| Loader | Use |
|---|---|
| Spinner (20 / 32px) | Inside buttons and small areas; 1–3s waits. Ring in the action colour, 700ms per turn |
| Dots (bouncer) | Inline “typing” or “thinking” in chat (Mai) and short waits next to text |
| Progress, indeterminate | Page or panel loading of unknown length; the Horizon gradient sweeps |
| Progress, determinate | Uploads, installs, exports: show percent or count (“34 of 120 files”) |
| Skeleton | First load of content with known layout. See Skeletons |
| Agent pulse | An AI agent is working: soft Oasis glow, 2.4s breathing, with a status line |
- Never rotate, spin or bounce the North star or the logo as a loader.
- Never show a spinner for more than ~10s without words; never show an indefinite spinner for an AI task.
- Respect reduced motion: loaders slow down but keep moving, so progress is still visible.
Success
- Prefer showing the result itself: the new row appears highlighted for 2s, the saved field shows a check.
- Use a toast when the result is off-screen or the surface closes: “Licence issued”. Past tense, 3–6 words, with Undo when possible.
- Never use a modal to say “Success”.
Failure
Say what happened and what to do
- Put the error where the problem is: next to the field, in the table, in the card.
- Message pattern: what happened + how to fix it. “Couldn't reach NorthStar Admiral Server. Check your network, then try again.”
- Offer Retry for transient failures, and keep the user's input.
- Use a danger alert for page-level problems, a toast only for background failures, a dialog only when work would be lost.
- Never show raw error codes alone; put technical details behind “Show details” for support.
Sync failed
3 licences couldn't be pushed to NorthStar Admiral Server.
Export failed. The file was too large.
Alerts, banners and toasts
Alerts, banner, toasts
Maintenance on Sunday
NorthStar Admiral Server restarts at 02:00 GST for about 10 minutes.
Pilot ready
All 120 users can sign in.
Licence expires in 9 days
Renew it in NorthStar Admiral Console to avoid interruption.
| Component | Placement | Lifetime | Use |
|---|---|---|---|
| Inline alert | In the content, above what it concerns | Until resolved or dismissed | Page or section status |
| Banner | Full width under the header | Until dismissed or condition ends | System-wide notices: maintenance, classified mode, offline |
| Toast | Bottom right (bottom left in RTL; bottom centre on mobile), stacked, max 3 | 5s; errors and toasts with actions stay until dismissed | Confirmation of background or off-screen results |
| Dialog | Centre, with scrim | Until answered | Decisions that block: confirm delete, unsaved changes |
Toasts and alerts use role="status" (polite) or role="alert" (errors) so screen readers announce them.
Empty and error states
Empty states
No analyses yet
Start one from a file, an organisation or a question.
You don't have access
Ask your NorthStar Admiral operator to add Shaheen to your licence.
- Empty states explain what will appear here and offer the first action. A library illustration may appear on first-use screens.
- No-results states repeat the query and offer to clear filters.
- Permission and offline states say who can help and what still works.
Code
<button class="n-btn n-btn--primary" aria-busy="true">Saving</button>
<span class="n-spinner" role="status" aria-label="Loading"></span>
<div class="n-progress" role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"><div class="n-progress__bar" style="width:34%"></div></div>
<div class="n-toast n-toast--success" role="status">…</div>
<div class="n-alert n-alert--danger" role="alert">…</div>Dos and don'ts
Do
- Acknowledge every action within 100ms.
- Match the loader to the wait.
- Put errors where the problem is, with a fix.
- Let people leave long AI tasks and notify them.
Don't
- Show endless spinners for AI tasks.
- Use modals for success messages.
- Animate the logo or the star as a loader.
- Show raw error codes without explanation.
Last updated on 14 October 2026