rr7-use-suspense.tsx

import { Suspense, use } from "react";
import { ErrorBoundary } from "react-error-boundary";

export async function loader() {
    // not awaited
    const reviews = getReviews();
    // awaited (blocks the transition)
    const book = await fetch("/api/book").then(res => res.json());
    return { book, reviews };
}

function Book({ loaderData }: Route.ComponentProps) {
    const { book, reviews } = loaderData;
    return (
        <div>
            <h1>{book.title}</h1>
            <p>{book.description}</p>
            <Suspense fallback={<ReviewsSkeleton />}>
                <ErrorBoundary fallback={<div>Could not load reviews 😬</div>}>
                    <Reviews items={reviews} />
                </ErrorBoundary>
            </Suspense>
        </div>
    );
}

function Reviews({ items }: { items: Promise<Review[]> }) {
    const resolvedReviews = use(items);

    return (
        <ul>
            {resolvedReviews.map(review => (
                <li>{review.text}</li>
            ))}
        </ul>
    );
}