Skip to content

feat(ui): shared analytics-card empty + loading skeleton states #2200

Description

@JSONbored

Add a reusable analytics-card skeleton + empty-state wrapper so the new analytics cards share one loading/empty treatment (skeleton shimmer on load, EmptyState with a hint when the metric has no data). Scoped to a small shared primitive + adoption in the analytics route. Complements #793 but is analytics-card-specific, not the cross-cutting StateBoundary refactor.

Deliverables

  • New AnalyticsCardShell (or extend state-views) providing a titled card with skeleton, empty, and ready slots
  • Skeleton rows using existing token classes; EmptyState reuse (state-views.tsx:86)
  • Adopt in at least the WeeklyValueMetricsPanel section wrapper in app.analytics.tsx without changing data flow
  • Vitest test covering skeleton (loading), empty, and ready render paths

References

  • apps/gittensory-ui/src/components/site/state-views.tsx:66
  • apps/gittensory-ui/src/components/site/state-views.tsx:86
  • apps/gittensory-ui/src/routes/app.analytics.tsx

Part of #1967.


📸 Required: before/after screenshots (this is a UI change)

Non-negotiable. PRs that change UI must include a before/after screenshot table. PRs without it are automatically closed — no exceptions.

Rules:

  • Show every page/feature you changed — before and after, one row each.
  • Use the markdown table below. Screenshots go inside the table only — no large full-size images pasted elsewhere in the PR.
  • Each cell is a clickable thumbnail (a small image linking to the full-size image) with a one-line caption underneath.
  • Upload screenshots to the PR by drag-and-drop (GitHub hosts them on its CDN). Do NOT commit image files to the repo.

Copy this and fill it in (replace FULL_IMAGE_URL with the URL GitHub gives you after you drop the image in):

| Page / Feature | Before | After |
|---|---|---|
| `/your-route` | [<img src="FULL_IMAGE_URL" width="260">](FULL_IMAGE_URL)<br><sub>before: short caption</sub> | [<img src="FULL_IMAGE_URL" width="260">](FULL_IMAGE_URL)<br><sub>after: short caption</sub> |


size: S · held for later release (gittensor:feature once activated)

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:featureGittensor-scored feature linked to a feature issue — scores a 0.25x multiplier.visualUI/web visual work — owner-led, NOT for Gittensor contributors (extensions excepted)

    Projects

    Status
    Done

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions