loading-states

Skeleton screens are placeholder layouts that mirror your actual content structure—avatars, list items, and action buttons in their final positions. Design them to match dimensions and spacing of real content, then replace with actual data when loading completes. This reduces perceived load time and keeps users confident content is coming.

Use progress bars with estimated timelines for operations exceeding a few seconds, and subtle spinners for shorter waits. Progress bars show users how much time remains; spinners work for indeterminate delays. Combine with accessible labels so screen readers announce the loading state.

Design empty-state messaging that explains why content is missing and provides actionable next steps—like a prompt to create the first item or adjust filters. Pair clear messaging with relevant imagery or icons so users understand the state is intentional, not an error.

Yes. Loading states enforce consistent patterns—skeleton screens, spinners, progress bars, and empty-state messaging—that adapt across themes. The Skill applies accessibility considerations like aria-busy attributes and reduced-motion support so loading states work universally.

Use aria-busy to announce loading status to screen readers, respect prefers-reduced-motion to remove animations for users sensitive to motion, and pair spinners with descriptive text. These ensure users relying on assistive technology understand when content is loading or unavailable.