loading-states

Create loading states for web and mobile interfaces with skeletons, spinners, and progressive loading.

2.0k|325|Updated Mar 7, 2026

Search Tags:#usability #progressive-loading #skeleton #optimistic-ui #ux-patterns #spinner #loading-states

Ready to run

npx skills add https://github.com/Owl-Listener/designer-skills --skill loading-states-owl-listener

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: loading-states
Source: https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/loading-states
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill loading-states-owl-listener

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing loading experiences that keep users informed and reduce perceived wait times during content fetch.

Core Features & Use Cases

Skeleton Screens: Show layout shape before content loads to set expectations and reduce layout shifts.
Spinner / Progress: Use subtle, small indicators when duration is uncertain; prefer determinate progress when measurable.
Progressive Loading: Prioritize critical content first and progressively reveal additional content as it becomes available.
Optimistic UI: Show the expected result immediately and reconcile with server response.
Best Practice & Accessibility: Ensure reduced motion support and accessible contrast for loading indicators.

Quick Start

Prototype a loading state flow for a key screen and validate with user feedback.

Frequently Asked Questions about loading-states

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

FAQPage Schema

What is the best way to design loading states for web interfaces?▼

Optimistic UI updates the interface immediately with the expected result, then reconciles with the server response. This UX pattern reduces perceived wait times by showing the final state instantly during content fetch operations.

How do I create a skeleton screen to reduce layout shifts?▼

To create a skeleton screen, design a placeholder that mirrors the layout shape of your content before it loads. This sets user expectations and significantly reduces layout shifts when the actual data populates the interface.

When should I use a spinner versus determinate progress indicators?▼

Use subtle spinners when loading duration is uncertain, and switch to determinate progress indicators when the load is measurable. Applying these timing guidelines keeps users informed during progressive loading operations.

Does designing loading states require accessibility support?▼

Yes, designing loading states requires accessibility support. You must ensure reduced motion support and accessible contrast for all loading indicators to accommodate users with different needs during content fetch operations.