Issue 6: ⚡ Performance - Memoization & Code Splitting

[arii]

Description
Optimize the Dashboard rendering by memoizing heavy components and lazy-loading non-critical UI elements.

Technical Specs

• Files: components/HrmTiles.tsx, components/HrTile.tsx, app/page.tsx
• Method: React.memo and next/dynamic.

Tasks

• Wrap HrTile in React.memo. Implement a custom arePropsEqual function to ignore updates if BPM/Zone hasn't changed.
• Memoize the filteredData calculation in HrmTiles.tsx.
• Implement next/dynamic imports for SpotifyDisplay and GoogleDocViewer in app/page.tsx with skeleton fallbacks.

Labels: frontend, performance
Priority: P2 - Medium

---

[google-labs-jules]

Jules is on it. When finished, you will see another comment and be able to review a PR.

[google-labs-jules]

Ready for a review! A PR has been created.

[google-labs-jules]

Jules is on it. When finished, you will see another comment and be able to review a PR.