loading-state-design

name	loading-state-design
description	Use when designing loading indicators. Loading states tell users 'we're working' without being annoying.

Loading State Design

Loading patterns: skeleton screens (preferred), spinner (simple), progress bar (known duration), shimmer (subtle). Match brand language.

Loading state types

Pattern	Use
Skeleton screen	Content is loading; show structure
Spinner	Generic 'loading' (use sparingly)
Progress bar	Known duration, e.g., upload
Shimmer/pulse	Subtle 'loading' on cards
Optimistic UI	Show result immediately, undo on error

Skeleton screen CSS

.skeleton {
  background: linear-gradient(
    90deg,
    var(--ink-10) 0%,
    var(--ink-15) 50%,
    var(--ink-10) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Loading state best practices

1. Show skeleton matching content structure (not generic spinner)
2. <500ms: no loading state needed
3. 500-2000ms: skeleton or spinner

4. 2000ms: progress bar with percentage

5. 10s: show 'this may take a moment' message

6. Time-out: show error with retry option

Where this fits in the X3 empire

Loading state design for CardPrepAI predict, sniper, and other tools.