Streaming & Suspense

// app/dashboard/loading.tsx -- instant loading UI for the entire route
export default function Loading() {
  return <div className="animate-pulse">Loading dashboard...</div>;
}

// app/dashboard/page.tsx -- granular streaming with Suspense
import { Suspense } from "react";
 
export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Loading stats...</p>}>
        <SlowStats />
      </Suspense>
      <Suspense fallback={<p>Loading chart...</p>}>
        <SlowChart />
      </Suspense>
    </main>
  );
}
 
async function SlowStats() {
  const stats = await fetchStats(); // 2s delay
  return <StatsGrid data={stats} />;
}

// app/dashboard/page.tsx
import { Suspense } from "react";
import { RecentOrders } from "./recent-orders";
import { RevenueChart } from "./revenue-chart";
import { TopProducts } from "./top-products";
 
export default function DashboardPage() {
  return (
    <main className="grid grid-cols-2 gap-6 p-6">
      <h1 className="col-span-2 text-2xl font-bold">Dashboard</h1>
 
      {/* Each section streams independently */}
      <Suspense fallback={<ChartSkeleton />}>
        <RevenueChart />
      </Suspense>
 
      <Suspense fallback={<ListSkeleton rows={5} />}>
        <TopProducts />
      </Suspense>
 
      <div className="col-span-2">
        <Suspense fallback={<TableSkeleton />}>
          <RecentOrders />
        </Suspense>
      </div>
    </main>
  );
}
 
function ChartSkeleton() {
  return <div className="h-64 bg-gray-100 rounded animate-pulse" />;
}
 
function ListSkeleton({ rows }: { rows: number }) {
  return (
    <div className="space-y-3">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="h-8 bg-gray-100 rounded animate-pulse" />
      ))}
    </div>
  );
}
 
function TableSkeleton() {
  return <div className="h-48 bg-gray-100 rounded animate-pulse" />;
}

// app/dashboard/revenue-chart.tsx (Server Component)
import { db } from "@/lib/db";
import { ChartClient } from "./chart-client";
 
export async function RevenueChart() {
  // Simulate a slow query
  const revenue = await db.order.aggregate({
    _sum: { total: true },
    where: { createdAt: { gte: new Date(Date.now() - 30 * 86400000) } },
  });
 
  const dailyData = await db.$queryRaw`
    SELECT DATE(created_at) as date, SUM(total) as total
    FROM orders
    WHERE created_at > NOW() - INTERVAL '30 days'
    GROUP BY DATE(created_at)
    ORDER BY date
  `;
 
  return <ChartClient data={dailyData} total={revenue._sum.total ?? 0} />;
}

// app/dashboard/loading.tsx
// This file creates an automatic Suspense boundary around the page
export default function DashboardLoading() {
  return (
    <div className="grid grid-cols-2 gap-6 p-6">
      <h1 className="col-span-2 text-2xl font-bold">Dashboard</h1>
      <div className="h-64 bg-gray-100 rounded animate-pulse" />
      <div className="h-64 bg-gray-100 rounded animate-pulse" />
      <div className="col-span-2 h-48 bg-gray-100 rounded animate-pulse" />
    </div>
  );
}

// Server Component passes a promise without awaiting
export default async function Page() {
  const analyticsPromise = fetchAnalytics(); // not awaited
  return (
    <Suspense fallback={<p>Loading analytics...</p>}>
      <Analytics dataPromise={analyticsPromise} />
    </Suspense>
  );
}
 
// Client Component consumes the promise with use()
"use client";
import { use } from "react";
 
export function Analytics({ dataPromise }: { dataPromise: Promise<Data> }) {
  const data = use(dataPromise); // suspends until resolved
  return <Chart data={data} />;
}

// Sequential -- each awaits in order (waterfall)
async function Sequential() {
  const a = await fetchA(); // blocks
  const b = await fetchB(); // waits for a
  return <>{a}{b}</>;
}
 
// Parallel -- separate Suspense boundaries
function Parallel() {
  return (
    <>
      <Suspense fallback={<p>A...</p>}><AsyncA /></Suspense>
      <Suspense fallback={<p>B...</p>}><AsyncB /></Suspense>
    </>
  );
}

// loading.tsx must be a default export returning ReactNode
export default function Loading(): React.ReactNode {
  return <Skeleton />;
}
 
// Suspense fallback accepts ReactNode
<Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</Suspense>
 
// use() hook type inference
const data: Data = use(dataPromise); // infers from Promise<Data>

// Production example: SSE streaming with markdown buffering
// File: src/hooks/use-stream-content.ts
const reader = response.body?.getReader();
const decoder = new TextDecoder();
let buffer = '';
 
const hasIncompleteMarkdown = (text: string): boolean => {
  const boldCount = (text.match(/\*\*/g) || []).length;
  if (boldCount % 2 !== 0) return true;
  const codeBlockCount = (text.match(/```/g) || []).length;
  if (codeBlockCount % 2 !== 0) return true;
  const openBrackets = (text.match(/\[/g) || []).length;
  const closeBrackets = (text.match(/\]/g) || []).length;
  if (openBrackets !== closeBrackets) return true;
  return false;
};
 
while (true) {
  if (options.signal?.aborted) {
    setState({ isStreaming: false, streamedContent: accumulated, error: 'Stream aborted' });
    return;
  }
 
  const { done, value } = await reader.read();
  if (done) {
    if (buffer) { accumulated += buffer; }
    break;
  }
 
  const chunk = decoder.decode(value, { stream: true });
  const lines = chunk.split('\n');
 
  for (const line of lines) {
    if (line.startsWith('data: ')) {
      try {
        const data = JSON.parse(line.slice(6));
        if (data.chunk) {
          buffer += data.chunk;
          const { complete, remaining } = extractCompleteUnits(buffer);
          if (complete) {
            accumulated += complete;
            buffer = remaining;
            setState({ isStreaming: true, streamedContent: accumulated, error: null });
            options.onChunk?.(complete);
          }
        }
      } catch { /* skip malformed SSE lines */ }
    }
  }
}