Loading performance design
Skill Dragoon0x/everything-design-taste/skills/loading-performance-design
Perceived performance design, skeleton screens, optimistic updates, and speed perception.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill loading-performance-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.3 KB, 269 tokens by cl100k_base, as published. Nobody here has run it
Loading Performance Design
Perceived vs Actual Performance
Users don't measure milliseconds. They measure whether the app feels fast.
Techniques
-
Optimistic updates: Show the result immediately, sync in background.
- Like button: heart fills instantly, API call happens after.
- Delete: item disappears instantly, undo available for 5s.
-
Progressive loading: Show content as it arrives.
- Text before images.
- Above-fold before below-fold.
- Skeleton → content replacement.
-
Pre-loading: Anticipate next action.
- Prefetch next page on link hover.
- Preload resources for likely next steps.
-
Instant feedback: Acknowledge every interaction.
- Button state change on click (don't wait for server).
- Input validation on blur (don't wait for submit).
Timing Thresholds
| Duration | Perception | Action |
|---|---|---|
| < 100ms | Instant | No feedback needed |
| 100-300ms | Slight delay | Show state change |
| 300ms-1s | Noticeable | Show loading indicator |
| 1-5s | Slow | Show progress + message |
| > 5s | Broken | Show progress + cancel option |
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.