Skip to main content

Documentation Index

Fetch the complete documentation index at: https://grantmaster.dev/llms.txt

Use this file to discover all available pages before exploring further.

Dashboard Perf Budget

Scope

This budget covers the dashboard-heavy workspace shells and the shared list infrastructure used by Overview, Workflow, Grants, Operations, and platform console pages.

Measurement Method

  • Use React Profiler for page-shell interactions: initial mount, tab switch, and browser Back.
  • Use DOM inspection for list-heavy surfaces to verify virtualization keeps the rendered node count bounded.
  • Use TanStack Query Devtools or network inspection to confirm tab switches reuse cached data rather than issuing fresh requests immediately.
The current tab-shell ceilings below are verified by Profiler-backed regression tests in src/features/routing/pageTabPerfBudget.test.tsx.

Current Budget

SurfaceInteractionCurrent measured ceilingBudget
Overview shellInitial mount2 commits<= 2 commits
Overview shellRoute-driven tab switch2 commits<= 2 commits
Workflow shellInitial mount with lazy tab panel3 commits<= 3 commits
Workflow shellRoute-driven tab switch with lazy panel3 commits<= 3 commits
Feed/list templatesInitial DOM rows/cards before virtualizationbounded by viewport after 24 items<= 40 rendered rows/cards
Query-backed dashboard tabsFresh refetch on tab switchcached within staleTime0 eager refetches within 60s

Targets By Area

Page Shells

  • Keep tab selection URL-driven so a tab click updates only the route shell and active panel.
  • Keep breadcrumb rendering static per route segment; do not rerender the page header from duplicate local state.
  • Lazy feature panels may add one extra commit on first mount, but subsequent switches should stay within the shell budget above.

Dashboard Metrics

  • First paint may show skeletons for one commit only.
  • KPI cards must settle to a numeric value or No data on the next commit after data resolves.
  • Do not leave literal Loading... helper text in settled KPI cards.

Lists And Feeds

  • Virtualize shared feed/registry templates once item count exceeds 24.
  • Keep rendered DOM rows/cards under 40 in a standard desktop viewport.
  • Avoid array-index keys; use stable entity IDs so unchanged rows are preserved across filter and sort changes.

Data Fetching

  • Use TanStack Query keys scoped by workspace/organization and route context.
  • Set staleTime for dashboard/workflow tab data to at least 60 seconds unless freshness requirements are stricter.
  • Cancel or ignore stale requests when switching tabs so late responses cannot repaint the wrong panel.

Review Checklist

  • Profile Overview and Workflow tab switches after any shell change.
  • Verify Back restores the prior URL, title, and panel content without an extra corrective navigation.
  • Check a large inbox/task dataset and confirm virtualization limits DOM growth.
  • Confirm Europe/Amsterdam date/time formatting remains stable when cached data refetches in the background.