loading-states_skill

Overview

This skill teaches how to design effective loading states, skeleton screens, spinners, progress bars, and empty states that preserve user confidence when content is delayed or missing. It focuses on choosing the right pattern by duration and context, accessible implementations, and practical rules to avoid common UX mistakes. Use it to make loading feel intentional, informative, and unobtrusive.

How this skill works

The skill inspects the expected content structure and operation duration to recommend an appropriate indicator: instant, subtle, skeleton, spinner, or progress bar. It provides simple CSS/HTML patterns for skeletons, spinners, progress bars, and empty/error states, plus accessibility snippets (aria-busy, reduced motion handling) and a checklist to validate implementations. It also flags cases where a skeleton or spinner is inappropriate and suggests actionable empty-state content.

When to use it

• When data or UI sections take 100ms–10s to render (skeletons for known layouts, spinners for unknown structures)
• For very short operations (100ms–1s) use subtle indicators or none
• For button or inline actions use small spinners or loading text
• For operations >10s use a progress bar with an estimated percentage or indeterminate animation
• When a user has no data, or a search/error returns nothing — provide helpful empty states and actions

Best practices

• Show a loading indicator immediately (within ~100ms) and match skeleton layout to real content
• Use skeletons for lists, cards, and predictable layouts; avoid skeletons for modals, toasts, dropdowns
• Prefer progress bars with estimates for long-running tasks and indeterminate bars when percent is unknown
• Respect motion preferences (prefers-reduced-motion) and ensure screen readers get loading announcements
• Include helpful CTAs in empty states (create, retry, clear filters) and avoid dead-end messaging
• Don’t overuse spinners for instant operations or animate aggressively

Example use cases

• E-commerce product grid: show card skeletons while images and prices load
• File uploader: show an upload progress bar with percent and cancel retry actions
• Dashboard with many widgets: display lightweight skeleton blocks per widget to reduce perceived latency
• Search page: show a "No results" empty state with suggestions and a clear filters button
• Form submit button: replace text with a small spinner while the request completes