# Feedback, loading, skeletons and empty states

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/feedback · Updated 2026-10-14
Use when: Designing how the UI responds to actions: clicks, waiting, progress, success, errors, toasts, alerts, skeletons, empty states.
Rules that always apply: https://identity.north.ae/AGENTS

## Timing
| Duration | Feedback |
|---|---|
| < 100ms | pressed state and result |
| 100ms–1s | spinner only after 300ms (avoid flicker) |
| 1–3s | spinner + what is happening ("Saving…") |
| 3–10s | indeterminate progress or skeleton + status line |
| > 10s | determinate progress or named steps, estimate, cancel, can leave and be notified |
| Minutes (AI) | background task: Oasis pulse + steps; toast and badge on completion |
- Optimistic UI only for reliable, reversible actions; never for sending, deleting, paying or AI acting for someone.

## Loaders
- Spinner 20/32px ring in action colour, 700ms/turn (in buttons and small areas). Dots bouncer (3 × 7px, 1.2s) for "typing". Indeterminate progress: Horizon gradient sweeping, 6px bar. Determinate: percent or count. Skeleton for first load with known layout. AI work: thinking orb whose state names the work + status line (see /AGENTS/ai). Presence pulse: small breathing Oasis dot for "connected/live" only.
- Never animate the logo or the star as a loader; never an endless spinner for AI; reduced motion slows loaders but keeps them moving.

## Success and failure
- Success: show the result (new row highlighted 2s, field check); toast when off-screen: past tense, 3–6 words, Undo when possible. Never a modal for success.
- Failure: error where the problem is; message = what happened + how to fix ("Couldn't reach NorthStar Admiral Server. Check your network, then try again."); Retry for transient; keep input; details behind "Show details"; no bare error codes.

## Alerts, banners, toasts
- Inline alert (radius 12, 14×16 padding, icon 20px, status bg + border at 25%, title bold) in content. Banner: full width under header, Midnight 90, for system-wide notices (maintenance, classified mode, offline). Toast: Midnight 90, Snow text, bottom-right (bottom-left RTL, bottom-centre mobile), max 3, 5s (errors and actionable toasts persist). Dialog only for blocking decisions. role="status" for polite, role="alert" for errors.

## Skeletons
- Match real layout: text lines 12px high radius 6 (widths 100/80/60%), headings 20px at 55%, circles for avatars, blocks with real aspect ratio radius 16, numbers 36px.
- Colours: --n-skeleton-base #ECEEF2 light / #1E2640 dark; shine --n-skeleton-shine.
- Styles: shimmer (default, highlight sweeps L→R every 1.6s, R→L in Arabic), pulse (opacity 100→55%, dense UI/tables), static (reduced motion, print). Swap the whole skeleton at once with a 140ms fade; time out into an error.
- Ghost elements (dashed 1.5px border, transparent, caption text + one action) mark empty slots the user can fill — not loading.
- Image placeholders: aspect-ratio box in skeleton colour; blur-up previews sharpen in 220ms; failed images show alt text.

## Empty states
- Explain what will appear and offer the first action; library illustration allowed on first-use screens. No-results: repeat query, offer to clear filters. Permission/offline: who can help, what still works.