Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Living wiki of UI design patterns and best practices built with Fumadocs, Next.js, and Base UI components.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
rules/ux-doherty-perceived-speed.md
1---2title: Fake Speed When Actual Speed Isn't Possible3impact: HIGH4tags: ux, doherty, perceived-speed, skeleton5---67## Fake Speed When Actual Speed Isn't Possible89If you can't make something fast, make it feel fast with optimistic UI, skeletons, or progress indicators.1011**Incorrect (blank screen during load):**1213```tsx14function Page() {15const { data, isLoading } = useFetch("/api/data");16if (isLoading) return null;17return <Content data={data} />;18}19```2021**Correct (skeleton during load):**2223```tsx24function Page() {25const { data, isLoading } = useFetch("/api/data");26if (isLoading) return <Skeleton />;27return <Content data={data} />;28}29```30