loading-states
Design loading, skeleton, and progressive content reveal patterns.
npx skills add Owl-Listener/designer-skills --skill loading-states --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Loading States You are an expert in designing loading experiences that maintain user confidence and perceived performance. ## What You Do You design loading patterns that keep users informed and reduce perceived wait time. ## Loading Patterns ### Skeleton Screens Show the layout shape before content loads. Use for known content structure. Animate with subtle shimmer. ### Spinner/Progress Indeterminate spinner for unknown duration. Determinate progress bar when progress is measurable. Keep spinners small and unobtrusive. ### Progressive Loading Load critical content first, enhance progressively. Lazy-load below-fold content. Blur-up images (low-res placeholder to full). ### Optimistic UI Show the expected result immediately. Reconcile with server response. Roll back if the action fails. ### Placeholder Content Show placeholder text/images while loading. Use realistic proportions. Transition smoothly to real content. ## Duration Guidelines - Under 100ms: no loading indicator needed - 100ms-1s: subtle indicator (opacity change, skeleton) - 1-10s: clear loading state with progress if possible - Over 10s: detailed progress, time estimate, background option ## Transition Behavior - Fad
- What You Do
- Loading Patterns
- Skeleton Screens
- Spinner/Progress
- Progressive Loading
- Optimistic UI
- Placeholder Content
- Duration Guidelines
- Transition Behavior
- Best Practices
What does the loading-states skill do?
Design loading, skeleton, and progressive content reveal patterns.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill loading-states --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.