Skip to content

app.index.tsx SparkStat hand-rolls skeleton placeholders instead of adopting Skeleton #6984

Description

@JSONbored

Context

apps/loopover-ui/src/routes/app.index.tsx's SparkStat loading state (~line 515-527) hand-rolls its own placeholder markup:

<div className="h-3 w-24 animate-pulse rounded bg-muted/40 motion-reduce:animate-none" />
<div className="mt-3 flex items-end justify-between gap-3">
  <div className="h-7 w-16 animate-pulse rounded bg-muted/40 motion-reduce:animate-none" />
  <div className="h-10 w-24 animate-pulse rounded bg-muted/30 motion-reduce:animate-none" />
</div>

app.index.tsx never imports Skeleton at all (confirmed — no such import in the file), despite this being the app's highest-traffic authenticated route and Skeleton already being the house pattern for loading placeholders (adopted across the apps/loopover-miner-ui redesign, epic #6504's visual track).

Requirements

  • Replace SparkStat's three hand-rolled animate-pulse placeholder <div>s with Skeleton, imported from @/components/ui/skeleton — the same import every other consumer in this app already uses (e.g. apps/loopover-ui/src/routes/app.analytics.tsx:8).
  • Preserve the existing sizing (label-line/value/sparkline dimensions) so the loading layout doesn't visually shift once real data arrives.
  • Do not invent a new skeleton component or keep the raw animate-pulse divs alongside a new one — this issue is satisfied only by adopting the existing shared Skeleton.

Deliverables

  • SparkStat's loading branch uses Skeleton instead of hand-rolled animate-pulse divs
  • Test covering the loading-state render path

Test Coverage Requirements

apps/** UI code falls outside this repo's strict Codecov patch gate (check coverage.include) — a before/after screenshot is still required per this repo's UI-PR convention, plus the regression test above.

Expected Outcome

app.index.tsx's loading state uses the same shared Skeleton primitive as the rest of the house design system instead of a one-off hand-rolled placeholder.

Links & Resources

Precedent: any apps/loopover-miner-ui route already adopting Skeleton per epic #6504's visual track (e.g. the closed child issues #6509/#6510/#6511/#6512 predecessors, or their successors #6829/#6830 for the still-open ones).

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:featureGittensor-scored feature linked to a feature issue — scores a 0.25x multiplier.help wantedExtra attention is needed

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions