Loading States
This covers the full spectrum of loading patterns, from skeleton screens and spinners to optimistic UI and progressive content reveals. It's opinionated about timing thresholds (like showing nothing under 100ms, clear states after 1 second) and transition behavior (fade don't pop, stagger list items at 30-50ms intervals). The practical guidance on avoiding layout shifts and matching skeleton shapes to actual content is spot on. Use this when you need to think through loading states systematically rather than just throwing a spinner on everything. The reduced-motion callout for shimmer animations is a nice touch most developers forget.
- skills.sh installs
- 2.5K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill loading-states --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Animation Principles2.5K
- Design Critique2.5K
- Design Qa Checklist2.5K
- Design Token Audit2.5K
- State Machine2.4K
- Error Handling Ux2.4K
- Design Token2.4K
- Usability Test Plan2.4K
- Accessibility Audit2.4K
- Case Study2.4K
- Ux Writing2.4K
- Journey Map2.4K
- Component Spec2.4K
- Design Principles2.4K
- Theming System2.4K
- Competitive Analysis2.3K
- Feedback Patterns2.3K
- Design Brief2.3K
- Prototype Strategy2.3K
- User Persona2.3K
- Jobs To Be Done2.3K
- Gesture Patterns2.3K
- Handoff Spec2.3K
- Experience Map2.3K
Recommended
More Design & UI/UX
compose-ui-testing-patternschrisbanes/skillsUse when writing or reviewing Jetpack Compose UI tests, screenshot tests, previews, semantics assertions, fake image loading, keyboard input, focus assertions, 2.5Kskills.sh installs
component-specowl-listener/designer-skillsWrite a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.2.4Kskills.sh installs
manimgl-best-practicesadithya-s-k/manim_skillTrigger when: (1) User mentions "manimgl" or "ManimGL" or "3b1b manim", (2) Code contains `from manimlib import *`, (3) User runs `manimgl` CLI commands, (4) Wo2.4Kskills.sh installstheming-systemowl-listener/designer-skillsDesign a theming architecture that supports brand variants, dark mode, and high-contrast modes with token mapping.2.4Kskills.sh installsgesture-patternsowl-listener/designer-skillsDesign gesture-based interactions for touch and pointer devices.2.3Kskills.sh installsdocumentation-templateowl-listener/designer-skillsGenerate structured documentation templates for components, patterns, or guidelines within a design system.2.3Kskills.sh installs