Context
Part of epic #6504's visual/ui-kit track. apps/loopover-miner-ui/src/routes/index.tsx renders every metric as a bare number in a <dd>/<span> (line 24) with plain-text loading state, despite packages/loopover-ui-kit/src/components/skeleton.tsx and chart.tsx shipping in the shared kit unused by this app.
Requirements
- Adopt
Skeleton for the loading state of index.tsx's SummaryCards, matching the real card layout instead of plain text.
- Adopt the shared async-state primitives from the ui-kit-port child issue of this same epic (blocked on that issue landing first) instead of hand-rolling loading/error/empty JSX.
- Consider
chart.tsx adoption if the overview page's metrics have a natural trend/sparkline representation — otherwise this is skeleton-only.
Deliverables
Test Coverage Requirements
99%+ Codecov patch coverage on every changed line and branch, plus a regression test for the new/changed behavior (note: apps/** UI code may fall outside the strict Codecov patch gate — check coverage.include — but a before/after screenshot table per this repo's UI-PR convention is still required for any visual change).
Expected Outcome
The overview route's loading state matches its real layout and shares the same async-state component every other restyled route uses.
Links & Resources
Epic: #6504. apps/loopover-miner-ui/src/routes/index.tsx:24, packages/loopover-ui-kit/src/components/skeleton.tsx, chart.tsx.
Context
Part of epic #6504's visual/ui-kit track.
apps/loopover-miner-ui/src/routes/index.tsxrenders every metric as a bare number in a<dd>/<span>(line 24) with plain-text loading state, despitepackages/loopover-ui-kit/src/components/skeleton.tsxandchart.tsxshipping in the shared kit unused by this app.Requirements
Skeletonfor the loading state ofindex.tsx'sSummaryCards, matching the real card layout instead of plain text.chart.tsxadoption if the overview page's metrics have a natural trend/sparkline representation — otherwise this is skeleton-only.Deliverables
index.tsxrestyled with skeleton loading stateStateBoundary/LoadingStateadopted instead of the hand-rolled 4-branch JSXTest Coverage Requirements
99%+ Codecov patch coverage on every changed line and branch, plus a regression test for the new/changed behavior (note: apps/** UI code may fall outside the strict Codecov patch gate — check coverage.include — but a before/after screenshot table per this repo's UI-PR convention is still required for any visual change).
Expected Outcome
The overview route's loading state matches its real layout and shares the same async-state component every other restyled route uses.
Links & Resources
Epic: #6504.
apps/loopover-miner-ui/src/routes/index.tsx:24,packages/loopover-ui-kit/src/components/skeleton.tsx,chart.tsx.