loading-states-and-perceived-performance

Loading States and Perceived Performance

Users don't mind waiting as much if they understand what they are waiting for and how much progress is being made. Perceived performance is the design work of making a system feel faster than it actually is.

---

Choosing the Right Loading State

Wait Duration	Best Pattern	Use for
Short (< 1s)	Inline Spinner / Loader	Button actions, small updates, quick data fetches
Medium (1s – 3s)	Skeleton Screen	Cards, lists, dashboards, profile pages
Long (> 3s)	Determinate Progress Bar	File uploads, complex exports, heavy processing
Full Page	Staggered Entry / Animated Sections	Initial app load, hero sections, immersive transitions

---

Simple Cases: Spinners and Loaders

Use spinners for small, contained actions where the layout doesn't change significantly.

• Button Spinners: Replace button text or sit alongside it. The button should enter a disabled state to prevent double-submissions.
• Micro-Loaders: A small 16–24px circle for inline updates (e.g., saving a single field).
• Animation Tip: A "spring-loaded" rotation (easing in and out) feels more premium than a constant linear rotation.

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spinner {
  animation: spin 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

---

Skeleton Screens (Glimmer/Shimmer)

Skeleton screens provide a visual placeholder that mimics the layout of the final content. This reduces "layout shift" (CLS) and signals to the user exactly where the content will appear.

The Shimmer Effect

A subtle, moving gradient that travels across the skeleton elements.

.skeleton {
  background: var(--color-grey-100);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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