Memoize and lazy-load the dashboard widgets to cut initial render and Recharts cost

[Baskarayelu]

📋 Description

The dashboard (app/dashboard/page.tsx) renders many widgets eagerly — components/Dashboard/MoneyDistributionWidget.tsx, components/Dashboard/SixMonthTrendsWidget.tsx, components/Dashboard/SavingsByGoalWidget.tsx, components/Dashboard/RecentTransactionsWidget.tsx, and the split widget components/CurrentMoneySplitWidget.tsx. The chart widgets pull in Recharts (heavy) and re-render on every parent state change. There's a separate open issue for the Insights charts; this targets the dashboard widgets specifically.

This issue lazy-loads the chart widgets and memoizes the static ones to reduce the dashboard's initial bundle and re-render churn.

Why this matters: the dashboard is the most-visited authenticated screen. Eagerly importing Recharts for every widget inflates the first load and makes unrelated state changes repaint charts. Lazy + memo is a measurable, low-risk win.

🎯 Requirements & Context

Functional requirements

• Lazy-load the Recharts-backed widgets (next/dynamic or React.lazy + Suspense) with skeleton fallbacks from components/ui/LoadingSkeletons.tsx.
• Wrap pure widgets in React.memo and stabilize props with useMemo/useCallback where the parent re-renders frequently.
• Verify no layout shift when a lazy widget resolves (reserve space).
• Confirm behavior parity with the current dashboard (no regressions in data or interactivity).

Context & constraints

• Don't change widget APIs unnecessarily — this is a perf refactor.
• Capture a before/after measurement (bundle delta and/or render count) in the PR.

🛠️ Suggested Execution

1. Fork & branch

git checkout -b perf/dashboard-widget-lazy-memo

2. Implement changes

• Convert chart widgets to dynamic imports with skeleton fallbacks.
• Memoize static widgets and stabilize props.
• Document the perf approach + measurements in docs/.
• Edge cases: reduced-motion skeletons, no layout shift, error fallback still works (WidgetErrorState), responsive, SSR/CSR boundaries respected.

3. Test & commit

npm run build
npm run lint
npx tsc --noEmit
npm run test:coverage

Example commit message

perf(dashboard): lazy-load chart widgets and memoize static ones

Defers Recharts-backed widgets behind dynamic imports with skeleton fallbacks
and memoizes pure widgets to cut initial load and re-render churn.

✅ Acceptance Criteria & Guidelines

Requirement	Target
Chart widgets lazy-loaded with skeletons	Required
Before/after measurement in PR	Required
No layout shift on resolve	Required
Behavior parity (no regressions)	Required
Responsive + reduced-motion	Required
build + lint + tsc --noEmit clean	Required
Timeframe	96 hours from assignment

💬 Community & Support

Questions and design discussion — join the RemitWise contributor community on Discord: https://discord.gg/CtQuPZFMA

Comment to claim. 🚀

[oscarj007]

Hello,
I'm a front-end developer with 5yrs of experience, permit me to work and resolve this issue

[whitezaddy]

I have experience with React and have reviewed the code; I can submit a PR within 2 days.

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[grantfox-oss]

🦊 GrantFox — @oscarj007 has been assigned to this issue!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #531)
2. Your PR will be reviewed by the Remitwise-Org maintainers

Good luck! Track your progress on GrantFox.