loading-states · owl-listener — Claude Code skill for loading states
Designs waiting states with skeletons, progress indicators, progressive loading and optimistic updates. Use it when content or actions take time to complete.
npx skills add Owl-Listener/designer-skills --skill loading-states -a claude-codeWhat loading-states does
This skill helps plan loading screens that do not leave a blank page behind. It can select skeletons for known layouts, a small spinner for an unknown wait, or a progress bar when work can be measured. It also covers low-resolution image placeholders that transition to the full image.
It guides progressive loading by bringing in critical content first and loading below-the-fold elements later. For actions, it can show an expected result immediately, reconcile it with the server response, then roll it back after a failure. Content should fade in, keep its place in the layout, and preserve scroll position during refreshes.
For waits over 10s, the skill calls for detailed progress, a time estimate, and a background option. That means these flows deserve separate testing. Shimmer animation should respect reduced-motion, while long waits need cancel or back controls.
What it helps with
- show a skeleton before a known layout loads
- choose a spinner or measurable progress bar
- load critical content before below-the-fold elements
- roll back an optimistic update after a failure
- keep scroll position during content refresh
Example prompts for the agent
- “Design loading states for this list and prevent layout shifts.”
- “Add an optimistic update that rolls back after a server error.”
- “Review this long-running flow and add progress with a cancel option.”
How to install loading-states
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill loading-states -a claude-code2Manually: put the files in place
~/.claude/skills/loading-states/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/loading-states/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill loading-states -a codex2Manually: put the files in place
.agents/skills/loading-states/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill loading-states -a cursor2Manually: put the files in place
.cursor/skills/loading-states/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills loading-states2Manually: put the files in place
.github/skills/loading-states/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill loading-states -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path interaction-design/skills/loading-statesManually: put the files in place
.devin/skills/loading-states/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill loading-states -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about loading-states
How do I install loading-states in Claude Code?
Run npx skills add Owl-Listener/designer-skills --skill loading-states -a claude-code, then run npx skills add Owl-Listener/designer-skills --skill loading-states -a claude-code again. The skill file is placed at ~/.claude/skills/loading-states/SKILL.md.
What does loading-states do?
It designs waiting experiences with skeleton screens, spinners, progress bars, progressive loading, placeholders, and optimistic UI. It also covers transitions that avoid layout shifts.
Which indicator should I use for a long wait?
Use a spinner when duration is unknown and a progress bar when progress is measurable. For waits over 10s, the skill recommends detailed progress, a time estimate, and a background option.
Source text
SKILL.md · MIT
--- name: loading-states description: Design waiting experiences — spinners, skeletons, optimistic updates, and progressive reveal. Use when content takes time to arrive. For the latency budget itself use `doherty-threshold`; for success confirmation use `feedback-patterns`. --- # 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 - Fade content in (don't pop) - Stagger items for lists (30-50ms intervals) - Avoid layout shifts when content loads - Maintain scroll position on content refresh ## Best Practices - Show something immediately (never a blank screen) - Match skeleton shapes to actual content - Avoid multiple competing loading indicators - Provide cancel/back options for long loads - Test on slow connections - Respect reduced-motion for shimmer animations
© Owl-Listener · MIT · Owl-Listener/designer-skills
Similar skills
Everything for Frontend and UI →loading-states by other authors comes first.
