Límites de Suspense — Maneja declarativamente estados de carga para componentes y datos asincrónos

import { Suspense } from "react";
 
// Envuelve componentes asincronos en límites de Suspense
function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Dashboard />
    </Suspense>
  );
}
 
// React 19: hook use() para datos basados en promesas
import { use } from "react";
 
function Dashboard({ dataPromise }: { dataPromise: Promise<DashboardData> }) {
  const data = use(dataPromise);
  return <DashboardView data={data} />;
}

import { Suspense, use, useState, useTransition, lazy, type ReactNode } from "react";
 
// --- Obtención de datos con use() y Suspense ---
 
interface Post {
  id: number;
  title: string;
  body: string;
}
 
// Caché para promesas de fetch (ejemplo simple — usa una biblioteca en producción)
const cache = new Map<string, Promise<Post[]>>();
 
function fetchPosts(userId: number): Promise<Post[]> {
  const key = `posts-${userId}`;
  if (!cache.has(key)) {
    cache.set(
      key,
      fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
        .then((res) => {
          if (!res.ok) throw new Error("Failed to fetch posts");
          return res.json();
        })
    );
  }
  return cache.get(key)!;
}
 
function PostList({ postsPromise }: { postsPromise: Promise<Post[]> }) {
  const posts = use(postsPromise);
  return (
    <ul className="space-y-4">
      {posts.map((post) => (
        <li key={post.id} className="border rounded-lg p-4">
          <h3 className="font-semibold">{post.title}</h3>
          <p className="text-gray-600 mt-1">{post.body}</p>
        </li>
      ))}
    </ul>
  );
}
 
// Cargador esqueleto
function PostListSkeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 3 }, (_, i) => (
        <div key={i} className="border rounded-lg p-4 animate-pulse">
          <div className="h-5 bg-gray-200 rounded w-3/4 mb-2" />
          <div className="h-4 bg-gray-200 rounded w-full" />
          <div className="h-4 bg-gray-200 rounded w-5/6 mt-1" />
        </div>
      ))}
    </div>
  );
}
 
// --- Página con múltiples límites de Suspense ---
 
function UserDashboard() {
  const [userId, setUserId] = useState(1);
  const [isPending, startTransition] = useTransition();
 
  const handleUserChange = (id: number) => {
    startTransition(() => {
      setUserId(id);
    });
  };
 
  return (
    <div className="max-w-2xl mx-auto p-6">
      <nav className="flex gap-2 mb-6">
        {[1, 2, 3].map((id) => (
          <button
            key={id}
            onClick={() => handleUserChange(id)}
            className={`px-4 py-2 rounded ${
              userId === id ? "bg-blue-600 text-white" : "bg-gray-100"
            } ${isPending ? "opacity-50" : ""}`}
          >
            User {id}
          </button>
        ))}
      </nav>
 
      <ErrorBoundary fallback={<p className="text-red-600">Failed to load posts.</p>}>
        <Suspense fallback={<PostListSkeleton />}>
          <PostList postsPromise={fetchPosts(userId)} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}
 
// --- Carga dinámica con Suspense ---
 
const Settings = lazy(() => import("./Settings"));
const Analytics = lazy(() => import("./Analytics"));
 
function AppRoutes() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

function ProductPage({ productId }: { productId: string }) {
  return (
    <Suspense fallback={<ProductSkeleton />}>
      <ProductDetails productId={productId} />
 
      {/* Las reseñas se cargan independientemente, más tarde */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={productId} />
      </Suspense>
    </Suspense>
  );
}

// app/page.tsx — Componente de servidor
export default function Page() {
  return (
    <main>
      <h1>Panel de Control</h1>
      <Suspense fallback={<ChartSkeleton />}>
        {/* Este componente de servidor asincrónico se transmite cuando está listo */}
        <RevenueChart />
      </Suspense>
    </main>
  );
}
 
async function RevenueChart() {
  const data = await getRevenueData(); // se ejecuta en servidor
  return <Chart data={data} />;
}

// Ejemplo de producción: página de destino de estudio con Suspense
// Archivo: src/app/study/page.tsx
import { Suspense } from "react";
import StudyServiceSelector from "@/components/study/study-service-selector";
 
export default async function StudyLandingPage() {
  const availableServices = await getAvailableStudyServices();
 
  const services = availableServices.map((service) => ({
    slug: service.serviceSlug,
    title: service.serviceTitle,
    platform: service.platform,
    basicsCount: service.categories.find((c) => c.category === "basics")?.cardCount || 0,
    featuresCount: service.categories.find((c) => c.category === "features")?.cardCount || 0,
    bestPracticesCount: service.categories.find((c) => c.category === "best-practices")?.cardCount || 0,
  }));
 
  const totalCards = availableServices.reduce((sum, s) => sum + s.totalCards, 0);
 
  return (
    <div className="relative min-h-screen">
      <Suspense fallback={<div>Loading services...</div>}>
        <StudyServiceSelector services={services} totalCards={totalCards} />
      </Suspense>
    </div>
  );
}