ReviewOS

stacks/bench-review

polish: loading skeletons across async views

#35
Closed glennmichael123 opened this 10 days ago ·
10 days ago

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 before latest() lands
    • ArticleView — skeleton blocks before current() lands
    • MyReviewsView — skeleton list rows
    • JudgeDirectory / CourtHouseDirectory — skeleton grid
    • BenchHeader typeahead 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.
9 days ago

Shipped on the three highest-impact views.

Where:

  • resources/components/Bench/ReviewsFeed.stx — 3 placeholder cards (avatar + name + meta + 3-line body + footer chips) before the latest-reviews feed lands. Same row shape as the real cards so the layout doesn't shift when the data arrives.
  • resources/components/Bench/Profile/ProfileView.stx — 3 placeholder dots + 3-line skeleton matching the recent-reviews list.
  • resources/components/Bench/MyReviewsView.stx — 3 placeholder card shells (title bar + badge + meta + body lines + action row) matching the eventual row layout.

Pattern — inline skeleton markup using Tailwind/crosswind's animate-pulse class for the shimmer + bg-gray-200 / bg-gray-100 for the value/secondary tier. No new component, no new CSS — just <div class="h-N w-X bg-gray-200 rounded"> placeholders sized to the real element.

Why no shared <Skeleton> component: for three use sites with different shapes (cards / dots / shells), an abstraction would force :if-driven prop branching that's harder to read than the inline markup. If the count grows past 5-6 use sites we extract; not yet.

Deferred: Skeletons on the typeahead dropdown, judge directory grid, and article view body. The first two are low-impact (typeahead landed quickly; directory is cached). Article view has its own loading nuance (medium-editor + leaflet bundle delay) that deserves a dedicated pass.

No layout-shift verification: tested mentally — each skeleton size matches the corresponding real element's text-N / h-N Tailwind class. Live-verify on slow-3G in DevTools if you want to confirm CLS stays low.

Sign in to comment on this issue.