feat(dashboard): implement granular Suspense boundaries for immediate…

app/(root)/dashboard/[username]/page.test.tsx

@@ -208,10 +208,12 @@ describe('DashboardPage', () => {
 
   describe('DashboardPage rendering', () => {
     it('renders the dashboard components with the fetched data', async () => {
-      const PageContent = await DashboardPage({
+      const SuspenseTree = await DashboardPage({
         params: Promise.resolve({ username: 'octocat' }),
         searchParams: Promise.resolve({}),
       });
+      const DashboardContent = SuspenseTree.props.children.type;
+      const PageContent = await DashboardContent(SuspenseTree.props.children.props);
 
       render(PageContent);
 
@@ -242,10 +244,12 @@ describe('DashboardPage', () => {
     });
 
     it('calls getFullDashboardData with bypassCache: true when refresh param is set', async () => {
-      const PageContent = await DashboardPage({
+      const SuspenseTree = await DashboardPage({
         params: Promise.resolve({ username: 'octocat' }),
         searchParams: Promise.resolve({ refresh: 'true' }),
       });
+      const DashboardContent = SuspenseTree.props.children.type;
+      const PageContent = await DashboardContent(SuspenseTree.props.children.props);
 
       render(PageContent);
 
@@ -261,10 +265,12 @@ describe('DashboardPage', () => {
     });
 
     it('passes a calendar-year query through to getFullDashboardData', async () => {
-      const PageContent = await DashboardPage({
+      const SuspenseTree = await DashboardPage({
         params: Promise.resolve({ username: 'octocat' }),
         searchParams: Promise.resolve({ year: '2024' }),
       });
+      const DashboardContent = SuspenseTree.props.children.type;
+      const PageContent = await DashboardContent(SuspenseTree.props.children.props);
 
       render(PageContent);
 
@@ -280,10 +286,12 @@ describe('DashboardPage', () => {
     });
 
     it('passes the correct activity data to the historical trend view', async () => {
-      const PageContent = await DashboardPage({
+      const SuspenseTree = await DashboardPage({
         params: Promise.resolve({ username: 'octocat' }),
         searchParams: Promise.resolve({}),
       });
+      const DashboardContent = SuspenseTree.props.children.type;
+      const PageContent = await DashboardContent(SuspenseTree.props.children.props);
 
       render(PageContent);
 
@@ -294,10 +302,12 @@ describe('DashboardPage', () => {
     it('calls notFound when dashboard data fetch throws an error', async () => {
       vi.mocked(getFullDashboardData).mockRejectedValueOnce(new Error('User not found'));
 
-      await DashboardPage({
+      const SuspenseTree = await DashboardPage({
         params: Promise.resolve({ username: 'missing-user' }),
         searchParams: Promise.resolve({}),
       });
+      const DashboardContent = SuspenseTree.props.children.type;
+      await DashboardContent(SuspenseTree.props.children.props);
 
       expect(mockNotFound).toHaveBeenCalledOnce();
     });

app/(root)/dashboard/[username]/page.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next';
+import { Suspense } from 'react';
 import DashboardClient from '@/components/dashboard/DashboardClient';
+import DashboardSkeleton from '@/components/dashboard/DashboardSkeleton';
 import { getFullDashboardData, fetchUserProfile, fetchUserRepos } from '@/lib/github';
 import { getUserGitHubToken } from '@/lib/githubtoken';
 
@@ -35,7 +37,6 @@ export async function generateMetadata({
 
   const ogImage = `${BASE_URL}/api/og?${queryParams.toString()}`;
 
-  // Dynamic title based on whether a user is comparing stats
   const compareUsername = resolvedSearchParams?.compare;
   const title =
     typeof compareUsername === 'string' && compareUsername
@@ -84,13 +85,35 @@ export default async function DashboardPage({
 }) {
   const { username } = await params;
   const resolvedSearchParams = await searchParams;
-  const bypassCache = resolvedSearchParams?.refresh === 'true';
-  const compareUsername = resolvedSearchParams?.compare;
+
+  return (
+    <Suspense fallback={<DashboardSkeleton />}>
+      <DashboardContent username={username} searchParams={resolvedSearchParams} />
+    </Suspense>
+  );
+}
+
+async function DashboardContent({
+  username,
+  searchParams,
+}: {
+  username: string;
+  searchParams: {
+    refresh?: string;
+    compare?: string;
+    year?: string;
+    month?: string;
+    from?: string;
+    to?: string;
+  };
+}) {
+  const bypassCache = searchParams?.refresh === 'true';
+  const compareUsername = searchParams?.compare;
   const period = resolveDashboardPeriod({
-    year: resolvedSearchParams?.year,
-    month: resolvedSearchParams?.month,
-    from: resolvedSearchParams?.from,
-    to: resolvedSearchParams?.to,
+    year: searchParams?.year,
+    month: searchParams?.month,
+    from: searchParams?.from,
+    to: searchParams?.to,
   });
   const userToken = await getUserGitHubToken();