Canon States

CANON · States

Every screen has at least 4 states beyond "happy path". Most products ship 1 or 2 and call it done. The states below are the contract: when reality breaks the pattern, the UI handles it gracefully.

The Four Required States

For any data-driven screen (list, table, dashboard, feed):

For interactive components (button, form, modal):

Loading States

Skeleton Screens

Skeletons reserve layout space and reduce perceived wait. Better than spinners for content that has a known shape.

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-surface-hover) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1500ms infinite linear;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

Don't skeleton everything. Skeletons are for primary content. Don't skeleton secondary chrome (sidebars, headers) that users already know.

Spinners

Use spinners when:

• Content shape is unknown
• Action is short (1–3s)
• Inline within a button or icon

<button disabled>
  <span class="spinner" aria-hidden="true"></span>
  <span class="sr-only">Saving…</span>
</button>

Spinner rules:

• Delay 400ms before showing (avoid flash for fast loads)
• Animate at 1000–1500ms per rotation (not too frenetic)
• Use brand accent color
• 16–24px size for inline; 40–48px for full-region

Progress Bars

Use determinate progress when total is known. Indeterminate when not.

<progress value="32" max="100">32%</progress>

<!-- Or ARIA for custom -->
<div role="progressbar"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="32"
     aria-label="Uploading file">
</div>

Empty States

The empty state is the user's first impression of an unused feature. Treat it as onboarding.

Three Empty State Types

First-time Empty State Structure

┌─────────────────────────────────┐
│         [icon or illo]          │
│                                 │
│   You don't have any projects   │
│                                 │
│   Projects help you organize    │
│   work into separate spaces.    │
│                                 │
│   [+ Create your first project] │
│   [Browse templates]            │
│                                 │
└─────────────────────────────────┘

Search Empty State

No results for "octopus"

Try a different search, or:
- Check your spelling
- Use fewer keywords
- Search in [different scope]

[Clear search]

Filter Empty State

No results match your filters

Try removing some filters or:
[Clear all filters]

Always offer "Clear filters" when filters caused the empty state. Users often forget filters are active.

Error States

Error Categories

Error State Structure

┌─────────────────────────────────────┐
│           [error icon]              │
│                                     │
│   We couldn't load your projects    │
│                                     │
│   Check your internet connection    │
│   or try refreshing the page.       │
│                                     │
│   [Try again]                       │
│   [Contact support]                 │
│                                     │
└─────────────────────────────────────┘

Tone: calm, not alarming. "Something went wrong" beats "FATAL ERROR". Don't apologize excessively. Don't blame the user.

Inline vs Full-screen Errors

Success States

Success states confirm an action without blocking.

Toast structure:
[icon] [message]                          [×]
       (optional secondary action)

Examples:
✓ Saved
✓ Project created
✓ 5 items moved to Archive  [Undo]

Undo Pattern

For destructive or significant actions, prefer action + Undo toast over confirmation dialog + action.

Before: "Are you sure you want to delete? [Cancel] [Delete]"
After:  Item deleted. [Undo]   (toast, 5-second window)

Undo is the more humane pattern. Reserve dialogs for irreversible actions.

Offline State

If your app needs the network:

Banner at top of viewport:
⚠ You're offline. Changes will sync when you reconnect.

Permission / Auth States

Never show a blank screen or generic 403. Always explain why and what's next.

Loading Inside Loaded

When a sub-region of a populated page loads (filter change, pagination):

Don't reset scroll position when loading new data into an existing page. Maintain context.

Anti-Patterns

Decision Tree

Building a screen?
├─ List its 4 states: loading, empty, error, populated
├─ Loading state: skeleton if shape known, spinner otherwise, 400ms delay
├─ Empty state: headline + description + primary action
├─ Error state: what failed + recovery action
└─ Populated: the happy path

Building an action?
├─ Loading: button shows spinner, disabled, label changes to present-continuous
├─ Success: toast or inline acknowledgement, present past-tense
├─ Error: inline message at the field or toast with retry
└─ Undo: offer for destructive actions (5s window)

Audit Checklist

1. For each list/table/dashboard, all 4 states (loading, empty, error, populated) implemented?
2. Empty states have headline + description + primary action?
3. Error states have a recovery action (try again, contact support)?
4. Loading delays of 400ms in place to avoid flashing spinners?
5. Skeletons match the shape of the content?
6. Skeletons stop when data loads (no infinite shimmer)?
7. Filter/search empty states offer "Clear" actions?
8. Destructive actions use Undo toast or require explicit confirmation?
9. Offline state designed if network is required?
10. Auth/permission failures explain and offer next steps?

Citations

• Material Design 3 Communication (Loading): https://m3.material.io/components/progress-indicators/overview
• Apple HIG Loading: https://developer.apple.com/design/human-interface-guidelines/loading
• Nielsen Norman Group, Skeleton Screens: https://www.nngroup.com/articles/skeleton-screens/
• Refactoring UI, Working With Empty States
• Andrew Coyle, Designing Better Empty States: https://uxdesign.cc/designing-better-empty-states
• Web Almanac on Performance Indicators