loading-states-and-perceived-performance

What problem does it solve?

This Skill helps interfaces communicate progress clearly and feel responsive during delays, preventing frustration, layout shifts, duplicate actions, and uncertainty while content or operations are loading.

Core Features & Use Cases

• Choose appropriate loading patterns: Select inline spinners, skeleton screens, determinate progress bars, or staggered entry animations based on expected wait duration and context.
• Improve perceived performance: Load high-value content first, stream secondary content progressively, preserve layout stability, and prefetch predictable next steps.
• Add resilient interaction feedback: Use optimistic UI with rollback handling, branded microcopy, progressive storytelling, and subtle arrival transitions.
• Use Case: Design a dashboard that shows skeleton cards during a medium-length fetch, renders the primary metric first, streams secondary panels afterward, and respects reduced-motion preferences.

Quick Start

Ask the loading-states-and-perceived-performance skill to design an appropriate loading experience for this data-heavy screen, including skeleton structure, timing, priority loading, and accessibility considerations.