Overview
Data-fetching components show nothing or a spinner while loading. Replace spinners with skeleton screens that match the shape of the loaded content for a polished perceived-performance experience.
Acceptance Criteria
- Skeleton components for: invoice card, invoice detail page, leaderboard row, payment history row, creator profile, dashboard header stats
- Skeletons match the exact layout and proportions of the loaded content (same height, same column widths)
- Skeleton animation: shimmer effect using Tailwind
animate-pulse or a custom CSS keyframe
- Skeletons shown during initial load AND during refetch (React Query
isFetching)
SkeletonInvoiceCard accepts a count prop to render N placeholders in a grid
- Skeletons work in both light and dark mode
aria-busy="true" and aria-label="Loading..." on skeleton containers for screen readers
- No skeleton shown if data loads in under 200 ms (avoids flash for fast connections) — use a 200 ms delay before showing skeleton
Overview
Data-fetching components show nothing or a spinner while loading. Replace spinners with skeleton screens that match the shape of the loaded content for a polished perceived-performance experience.
Acceptance Criteria
animate-pulseor a custom CSS keyframeisFetching)SkeletonInvoiceCardaccepts acountprop to render N placeholders in a gridaria-busy="true"andaria-label="Loading..."on skeleton containers for screen readers