loading-states

Design loading states with skeleton screens, spinners, and progressive loading for web and mobile UIs.

3|Updated Mar 28, 2026

Search Tags:#usability #ux-design #progressive-loading #optimistic-ui #loading-states #skeleton-screens

Ready to run

npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill loading-states-hulusi-tunc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: loading-states
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/interaction-design--loading-states
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill loading-states-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design loading states that keep users informed while content loads, reducing perceived wait times.

Core Features & Use Cases

Skeleton screens to reveal layout structure
Spinner/Progress patterns for unknown duration and determined progress
Progressive loading and optimistic UI to improve perceived speed
Placeholder content to prevent blank screens

Quick Start

Apply the loading patterns in your UI to the first screen load to reduce perceived wait time.

Frequently Asked Questions about loading-states

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

FAQPage Schema

What are skeleton screens and how do they improve loading states?▼

Skeleton screens act as placeholder content that reveals layout structure before data fetches complete. They improve loading states by preventing blank screens and setting clear visual expectations during waits.

How do I design loading states for unknown duration versus determined progress?▼

Use spinner patterns for unknown loading durations and progress indicators for determined progress. Effective loading states match the UI pattern to the wait certainty, applying transitions to keep users informed.

When should I use optimistic UI instead of a loading spinner?▼

Use optimistic UI instead of a loading spinner when you want to improve perceived speed by immediately reflecting expected changes. It is effective for progressive loading workflows where confidence in the final result is high.

Does this loading state design approach work for both web and mobile UIs?▼

Yes, the loading state design approach works for both web and mobile UIs. It applies patterns like skeleton screens and progressive content reveal to navigation and data fetch workflows across platforms.

What is the best way to reduce perceived wait times during content fetches?▼

The best way to reduce perceived wait times is applying progressive loading and skeleton screens. These loading state patterns reveal content progressively and prevent blank screens during data fetches.