feat: add Suspense boundaries for dashboard streaming

apps/app/src/app/(dashboard)/page.tsx

@@ -1,8 +1,10 @@
+import { Suspense } from "react";
 import Link from "next/link";
 import { auth } from "@/server/auth.server";
-import { FeedbackStatsCards } from "@/app/_components/feedback-stats-cards";
-import { NoFeedbackState } from "@/app/_components/empty-state";
-import { getFeedbackStats } from "@propsto/data/repos";
+import { FeedbackStats } from "@/app/_components/feedback-stats";
+import { StatsCardsSkeleton } from "@/app/_components/stats-cards-skeleton";
+import { RecentFeedbackSection } from "@/app/_components/recent-feedback-section";
+import { RecentFeedbackSkeleton } from "@/app/_components/recent-feedback-skeleton";
 
 export default async function DashboardPage(): Promise<React.ReactNode> {
   const session = await auth();
@@ -12,17 +14,6 @@ export default async function DashboardPage(): Promise<React.ReactNode> {
 
   const userId = session.user.id;
 
-  // Get feedback stats for the user
-  const statsResult = await getFeedbackStats(userId);
-  const stats = statsResult.success
-    ? {
-        received: statsResult.data.received,
-        sent: statsResult.data.sent,
-        pending: statsResult.data.pendingModeration,
-        recentCount: statsResult.data.recentCount,
-      }
-    : { received: 0, sent: 0, pending: 0, recentCount: 0 };
-
   return (
     <div className="flex flex-col gap-6 py-6">
       <div className="px-4 lg:px-6">
@@ -32,23 +23,15 @@ export default async function DashboardPage(): Promise<React.ReactNode> {
         </p>
       </div>
 
-      {/* Stats Cards */}
-      <FeedbackStatsCards stats={stats} />
+      {/* Stats Cards - Streamed with Suspense */}
+      <Suspense fallback={<StatsCardsSkeleton />}>
+        <FeedbackStats userId={userId} />
+      </Suspense>
 
-      {/* Recent Feedback or Empty State */}
-      <div className="px-4 lg:px-6">
-        <h2 className="mb-4 text-lg font-semibold">Recent Feedback</h2>
-        {stats.received === 0 ? (
-          <NoFeedbackState />
-        ) : (
-          <div className="text-muted-foreground">
-            You have {stats.received} feedback items.{" "}
-            <Link href="/feedback" className="text-primary underline">
-              View all
-            </Link>
-          </div>
-        )}
-      </div>
+      {/* Recent Feedback - Streamed with Suspense */}
+      <Suspense fallback={<RecentFeedbackSkeleton />}>
+        <RecentFeedbackSection userId={userId} />
+      </Suspense>
 
       {/* Quick Actions */}
       <div className="px-4 lg:px-6">

apps/app/src/app/_components/cached-queries.ts

@@ -0,0 +1,8 @@
+import { cache } from "react";
+import { getFeedbackStats as _getFeedbackStats } from "@propsto/data/repos";
+
+/**
+ * Cached version of getFeedbackStats.
+ * Deduplicates calls within the same request (e.g., across Suspense boundaries).
+ */
+export const getFeedbackStats = cache(_getFeedbackStats);

apps/app/src/app/_components/feedback-stats.tsx

@@ -0,0 +1,26 @@
+import { getFeedbackStats } from "./cached-queries";
+import { FeedbackStatsCards } from "./feedback-stats-cards";
+
+interface FeedbackStatsProps {
+  userId: string;
+}
+
+/**
+ * Async server component that fetches stats.
+ * Wrap with Suspense for streaming.
+ */
+export async function FeedbackStats({
+  userId,
+}: FeedbackStatsProps): Promise<React.JSX.Element> {
+  const statsResult = await getFeedbackStats(userId);
+  const stats = statsResult.success
+    ? {
+        received: statsResult.data.received,
+        sent: statsResult.data.sent,
+        pending: statsResult.data.pendingModeration,
+        recentCount: statsResult.data.recentCount,
+      }
+    : { received: 0, sent: 0, pending: 0, recentCount: 0 };
+
+  return <FeedbackStatsCards stats={stats} />;
+}

apps/app/src/app/_components/recent-feedback-section.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { getFeedbackStats } from "./cached-queries";
+import { NoFeedbackState } from "./empty-state";
+
+interface RecentFeedbackSectionProps {
+  userId: string;
+}
+
+/**
+ * Async component for recent feedback section.
+ * Wrap with Suspense for streaming.
+ */
+export async function RecentFeedbackSection({
+  userId,
+}: RecentFeedbackSectionProps): Promise<React.JSX.Element> {
+  const statsResult = await getFeedbackStats(userId);
+  const receivedCount = statsResult.success ? statsResult.data.received : 0;
+
+  return (
+    <div className="px-4 lg:px-6">
+      <h2 className="mb-4 text-lg font-semibold">Recent Feedback</h2>
+      {receivedCount === 0 ? (
+        <NoFeedbackState />
+      ) : (
+        <div className="text-muted-foreground">
+          You have {receivedCount} feedback items.{" "}
+          <Link href="/feedback" className="text-primary underline">
+            View all
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

apps/app/src/app/_components/recent-feedback-skeleton.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from "@propsto/ui/atoms/skeleton";
+
+export function RecentFeedbackSkeleton(): React.JSX.Element {
+  return (
+    <div className="px-4 lg:px-6">
+      <Skeleton className="mb-4 h-7 w-36" />
+      <Skeleton className="h-4 w-64" />
+    </div>
+  );
+}

apps/app/src/app/_components/stats-cards-skeleton.tsx

@@ -0,0 +1,24 @@
+import { Card, CardFooter, CardHeader } from "@propsto/ui/atoms/card";
+import { Skeleton } from "@propsto/ui/atoms/skeleton";
+
+export function StatsCardsSkeleton(): React.JSX.Element {
+  return (
+    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+      {[1, 2, 3, 4].map(i => (
+        <Card key={i} className="@container/card" data-slot="card">
+          <CardHeader className="relative">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="mt-2 h-8 w-16" />
+            <div className="absolute right-4 top-4">
+              <Skeleton className="size-5 rounded" />
+            </div>
+          </CardHeader>
+          <CardFooter className="flex-col items-start gap-1">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-3 w-40" />
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}