Show loading indicators
SkillMediaA skill for auditing whether a web page shows loading indicators during async operations. It guides an agent to verify the actual bottleneck in DevTools, Lighthouse, or field data, then review routes, assets, and loading behavior for missing or incorrect feedback such as spinners, skeletons, and ARIA attributes.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a web project whose routes, assets, and async operations can be inspected.
Then ask your AI: use the Show loading indicators skill
What your AI can do with it
- Audit slow page loads, heavy assets, and rendering delays related to Show loading indicato
- Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending ch
- Check that loading states appear during async operations with appropriate ARIA attributes
- Recommend fixes using aria-busy, aria-live, spinners, and progress bars
- Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layou
- Explain how loading indicators improve perceived performance and accessibility
Getting started
- Have a web project whose routes, assets, and async operations can be inspected.
- Add the loading-indicators skill to the agent's available skills.
- Ask the agent to audit loading indicators on the pages or flows in question.
- Provide access to measurement data such as DevTools traces, Lighthouse reports, or field data so the agent can confirm the bottleneck.
- Review the agent's findings and apply the recommended loading-state fixes.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/loading-indicators/SKILL.md and read by ahel’s review.
Loading indicators reassure users that something is happening—without feedback, users may think the page is broken or click repeatedly, degrading experience and causing duplicate actions.
Quick Reference
- Show immediate feedback for all async operations
- Use skeletons for content, spinners for actions
- Include ARIA attributes for screen reader accessibility
- Avoid content jumps when loading completes
Check
Verify that loading states are displayed during async operations with appropriate ARIA attributes for screen readers.
Fix
Implement loading spinners/progress bars with aria-busy, aria-live, and clear visual feedback for ongoing operations.
Explain
Explain how loading indicators improve perceived performance and accessibility by communicating system status to users.
Code Review
Review the routes, assets, and loading behavior that affect Show loading indicators. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/performance/loading-indicators
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- When auditing slow page loads, heavy assets, or rendering delays related to Show loading indicators, especially where users get no feedback during async operations.
- How does it verify a problem exists?
- It checks the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes, and describes the measurement method used.
Advanced
- Item type
- skill
- Key
loading-indicators- Source
- github.com/thedaviddias/front-end-checklist