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
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).
Context
apps/loopover-ui/src/routes/app.index.tsx'sSparkStatloading state (~line 515-527) hand-rolls its own placeholder markup:app.index.tsxnever importsSkeletonat all (confirmed — no such import in the file), despite this being the app's highest-traffic authenticated route andSkeletonalready being the house pattern for loading placeholders (adopted across theapps/loopover-miner-uiredesign, epic #6504's visual track).Requirements
SparkStat's three hand-rolledanimate-pulseplaceholder<div>s withSkeleton, 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).animate-pulsedivs alongside a new one — this issue is satisfied only by adopting the existing sharedSkeleton.Deliverables
SparkStat's loading branch usesSkeletoninstead of hand-rolledanimate-pulsedivsTest Coverage Requirements
apps/**UI code falls outside this repo's strict Codecov patch gate (checkcoverage.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 sharedSkeletonprimitive as the rest of the house design system instead of a one-off hand-rolled placeholder.Links & Resources
Precedent: any
apps/loopover-miner-uiroute already adoptingSkeletonper 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).