fix(dashboard): clear usage spinner and show empty state

Draft
PO
2mo ago
+67-33

Summary

The usage widget (src/components/dashboard/Usage.vue) is the first screen after login on both /dashboard and /app/:id. It failed silently in two ways:

  • Spinner that never clears. onMounted loaded data only when main.dashboardFetched was true; otherwise it waited on watch(dashboard, ...). When the store fetch fails, dashboard never changes, the watcher never fires, isLoading stays true, and every ChartCard keeps its spinner forever.
  • Blank widgets with no explanation. noData was hard-coded to computed(() => false), so an account with no usage rendered the full widget grid with nothing in it.

Changes

  • Spinner always clears. Wrap loadData in try/finally so isLoading is reset even if a fetch throws, and add a bounded fallback timer in onMounted: if the dashboard watcher has not loaded within INITIAL_LOAD_FALLBACK_MS (6s), load anyway. The app-level view fetches its own stats, so it no longer waits on an unrelated org-level fetch.
  • Real empty state. Restore a meaningful noData check (loading done, not showing demo charts, every day empty) and render a clear "No data" state instead of a grid of empty widgets. The no-apps demo experience is unchanged.

[!NOTE]
The report also suggested un-swallowing the updateDashboard failure in src/stores/organization.ts. That console.error catch is left in place on purpose: the org watcher is reactive and should not throw, and its stated harm — a stranded spinner — is removed here at the component level. Once the spinner clears, the existing Reload button in the widget is the retry path. Removing the catch adds risk without changing what the user observes.

Test plan

  • Load /dashboard and /app/:id for an org whose stats fetch fails or stalls; confirm the spinner clears within ~6s and charts fall back to an empty or demo state instead of spinning forever.
  • Load the dashboard for an account with apps but no usage data; confirm a single "No data" state renders instead of empty widgets.
  • Confirm accounts with data and the payment-failed / no-apps demo states are unchanged.

Screenshots

Checklist

  • My code follows the code style of this project and passes
    bun run lint:backend && bun run lint.
  • My change requires a change to the documentation.
  • I have updated the documentation
    accordingly.
  • My change has adequate E2E test coverage.
  • I have tested my code manually, and I have provided steps how to reproduce
    my tests

Created with PostHog Desktop from this inbox report.


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.