skills.rest
soeiroo
soeirooCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/soeiroo/multifunctional-web --skill loading-states-soeiroo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
syncfusionsyncfusion
60

syncfusion-maui-shimmer

Create programmable shimmer loading placeholders for .NET MAUI apps with SfShimmer.

Official
Intermediate
Montte-erpMontte-erp
6

tanstack-db

Manage client-side API data with normalized collections, live queries, and optimistic mutations.

Official
Intermediate
RelicWare-CoRelicWare-Co

animate

Analyze UI and implement CSS transitions and JavaScript animations for micro-interactions.

Official
Intermediate
jiaiyanjiaiyan
21

el-loading

Provide consistent loading indicators for Element Plus components with v-loading and ElLoading.service.

Community
Intermediate