📌 Description
The four Recharts-based charts under src/components/dashboard/ (Value,
Drawdown, Fee, Compliance) are imported eagerly by
CommitmentHealthMetrics.tsx, pulling Recharts into the initial commitment-detail
bundle even though only the active tab is visible. This inflates the detail page's
JavaScript payload.
This issue lazy-loads the chart tabs with next/dynamic and a skeleton fallback
so Recharts loads only when a chart tab is actually viewed.
🎯 Requirements and Context
- Dynamically import each chart tab; show
HealthMetricsSkeleton while loading.
- Default tab still renders correctly; switching tabs loads on demand.
- No SSR mismatch; charts remain client-only as needed.
- Measure and document the bundle reduction.
🛠️ Suggested Execution
1. Fork the repo and create a branch
git checkout -b perf/lazy-load-health-charts
2. Implement changes
- Update
src/components/dashboard/CommitmentHealthMetrics.tsx to use
next/dynamic for each chart, with HealthMetricsSkeleton fallback.
- Add
src/components/dashboard/CommitmentHealthMetrics.lazy.test.tsx asserting
the skeleton shows before a chart resolves and the right chart loads per tab.
- Add
docs/performance/LAZY_HEALTH_CHARTS.md with before/after bundle notes.
- Validate no hydration warnings.
3. Test and commit
- Run
pnpm test.
- Cover edge cases: switching tabs before load completes, default tab, repeated
switching (no double-load).
Example commit message
perf: lazy-load health-metrics Recharts tabs on commitment detail
✅ Guidelines
- Minimum 95% test coverage on new/changed lines.
- Clear, reviewer-friendly documentation.
- Timeframe: 96 hours.
🏷️ Labels
type-performance · area-frontend · MAYBE REWARDED · GRANTFOX OSS ·
OFFICIAL CAMPAIGN
💬 Community & Support
- Join the CommitLabs contributor Discord to coordinate and get unblocked fast:
https://discord.gg/WV7tdYkJk
- Introduce yourself before starting so we can avoid duplicate work and pair you
with a reviewer. Maintainers triage actively and review fast.
📌 Description
The four Recharts-based charts under
src/components/dashboard/(Value,Drawdown, Fee, Compliance) are imported eagerly by
CommitmentHealthMetrics.tsx, pulling Recharts into the initial commitment-detailbundle even though only the active tab is visible. This inflates the detail page's
JavaScript payload.
This issue lazy-loads the chart tabs with
next/dynamicand a skeleton fallbackso Recharts loads only when a chart tab is actually viewed.
🎯 Requirements and Context
HealthMetricsSkeletonwhile loading.🛠️ Suggested Execution
1. Fork the repo and create a branch
2. Implement changes
src/components/dashboard/CommitmentHealthMetrics.tsxto usenext/dynamicfor each chart, withHealthMetricsSkeletonfallback.src/components/dashboard/CommitmentHealthMetrics.lazy.test.tsxassertingthe skeleton shows before a chart resolves and the right chart loads per tab.
docs/performance/LAZY_HEALTH_CHARTS.mdwith before/after bundle notes.3. Test and commit
pnpm test.switching (no double-load).
Example commit message
✅ Guidelines
🏷️ Labels
type-performance·area-frontend·MAYBE REWARDED·GRANTFOX OSS·OFFICIAL CAMPAIGN💬 Community & Support
https://discord.gg/WV7tdYkJk
with a reviewer. Maintainers triage actively and review fast.