Most async pages currently show bare "Loading…" text or nothing while data loads. Replace with skeleton placeholders that match the eventual layout — cheaper than a spinner, makes the SPA feel snappier even without changing the actual fetch latency.
Scope
- Reusable
<SkeletonCard>/<SkeletonText lines={N}>/<SkeletonAvatar>stx components with a CSS shimmer animation. - Wire into:
ReviewsFeed— skeleton cards beforelatest()landsArticleView— skeleton blocks beforecurrent()landsMyReviewsView— skeleton list rowsJudgeDirectory/CourtHouseDirectory— skeleton gridBenchHeadertypeahead dropdown — skeleton rows during search
- Match the eventual rendered shape so there's no layout shift when the data arrives.
Acceptance
- All major data-driven views show skeletons instead of "Loading…".
- No layout-shift jank when data lands (CLS stays low).
- Skeleton respects dark-mode if/when added.