perf: Lazy load below-the-fold dashboard widgets (#1036)

[Akash1510]

Summary

Implemented lazy loading for below-the-fold dashboard widgets using IntersectionObserver to defer rendering and API requests until widgets enter the viewport.

Closes #1036

Type of Change

• Refactor / code cleanup

Changes Made

• Added reusable LazyWidget component using IntersectionObserver
• Deferred rendering of below-the-fold dashboard widgets
• Added skeleton placeholders while widgets are outside viewport
• Prevented unnecessary API calls during initial dashboard load
• Preserved layout dimensions to avoid layout shift (CLS)

Lazy-loaded widgets

• ContributionHeatmap
• FriendComparison
• PRReviewTrendChart
• IssueMetrics
• CIAnalytics
• DiscussionsWidget
• PinnedRepos
• InactiveRepositoriesCard
• TopRepos
• LanguageBreakdown
• RecentActivity

Before

• All dashboard widgets rendered immediately on page load
• All associated API requests fired during initial mount
• Higher initial render workload
• Slower Time to Interactive

After

• Below-the-fold widgets render only when entering viewport
• API requests are deferred until needed
• Reduced initial dashboard rendering cost
• Improved progressive loading behavior

How to Test

1. Run locally

npm install
npm run dev

2. Open /dashboard

3. Open DevTools → Network tab

4. Verify:

• Above-the-fold widgets load immediately
• Below-the-fold widget requests trigger only on scroll
• Skeleton placeholders render correctly
• No layout shift occurs

5. Run checks

npm run lint
npm run build

Screenshots

N/A (performance optimization)

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors
• Self-reviewed the diff

[vercel]

@Akash1510 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Priyanshu-byte-coder]

This PR has a merge conflict with main (overlaps with recently merged dashboard page changes). Please rebase your branch and resolve conflicts so we can merge it.

[Akash1510]

kindly check this

[Akash1510]

kindly check this

[Akash1510]

Kindly check PR

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!