loading-states

Implement skeleton screens, spinners, and progressive loading with reduced-motion support.

Updated Mar 16, 2026

Search Tags:#ui-ux #transitions #progressive-loading #skeleton #optimistic-ui #loading-states #perceived-performance

Ready to run

npx skills add https://github.com/soeiroo/multifunctional-web --skill loading-states-soeiroo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: loading-states
Source: https://github.com/soeiroo/multifunctional-web/tree/main/.agents/skills/loading-states
Command: npx skills add https://github.com/soeiroo/multifunctional-web --skill loading-states-soeiroo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Delay in content visibility harms user trust; well-designed loading patterns inform users and reduce perceived wait time.

Core Features & Use Cases

Skeleton Screens: Show layout shapes to set expectations before content loads.
Spinner & Progress: Use subtle indicators for unknown durations and progress bars when measurable.
Progressive Loading: Prioritize critical content and reveal additional data progressively.
Accessible & Motion-Aware: Respect reduced-motion preferences and maintain layout stability.

Quick Start

Implement a core loading skeleton for the main content area and fade in content as data resolves.

Frequently Asked Questions about loading-states

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design loading states that reduce perceived wait time?▼

To design loading states that reduce perceived wait time, implement skeleton screens to set layout expectations and use progressive loading to prioritize critical content before revealing secondary data.

What is the difference between a skeleton screen and a spinner for UI loading?▼

A skeleton screen shows layout shapes to set expectations before content loads, whereas a spinner acts as a subtle indicator for unknown durations, making spinners better for quick tasks and skeletons ideal for data-heavy screens.

When should I use optimistic UI instead of a progress bar for loading?▼

Use optimistic UI for immediate feedback on user actions like submitting forms, whereas progress bars are suited for measurable background tasks, and spinners fit unmeasurable wait times.

How do I apply progressive loading to data-heavy screens?▼

Apply progressive loading to data-heavy screens by prioritizing critical content first, using skeleton screens for the main layout, and smoothly transitioning in additional data as it resolves.

Does implementing skeleton screens require specific UI component dependencies?▼

No specific dependencies are required to implement skeleton screens, allowing you to design layout shapes and progressive content reveals directly within your existing UI and UX workflow.