React: Use Suspense Boundaries to stream dashboard components

[DamienSable]

📝 Description

In the App Router, if page.tsx awaits a massive data fetch from GitHub, the entire page blocks until the data is ready. We want the dashboard "shell" (Navbar, Footer, basic layout) to load instantly, while the individual charts and widgets load asynchronously.

🎯 What needs to be done

Refactor the data fetching logic on the dashboard page. Instead of awaiting everything at the top level, pass promises (or wrap components in React <Suspense>) so the Next.js server can stream UI components to the client as soon as their specific data resolves.

📍 Where to look

• app/(root)/[username]/page.tsx
• app/(root)/[username]/loading.tsx (You may need to move pieces of this into specific fallback components).
• Next.js Docs: Streaming with Suspense

✅ Acceptance Criteria

• The dashboard layout instantly renders when navigating to /[username].
• Heavy components (like ActivityLandscape or AIInsights) display isolated loading states/skeletons and pop in individually when ready.
• The time-to-first-paint for the dashboard route is significantly reduced.

[Arpitmeh-glitch]

Hi @DamienSable , I would like to work on this issue under GSSoC 2026. Please assign it to me.

[SnehaSnigdhaSahoo]

hello,
I would love to work on this issue under GSSoC'26 if it is available.
My approach would be to:

• move heavy data-fetching components into separate Suspense boundaries.
• add loading skeletons for components like ActivityLandscape and AIInsights.
• allow the main dashboard layout to render immediately.
• load charts asynchronously as their data becomes available.