Skip to content

Instantly share code, notes, and snippets.

@markmals

markmals/rr7-use-suspense.tsx

Created February 8, 2026 19:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markmals/8900395de91a5e3b29b9d4326b0bf65b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markmals/8900395de91a5e3b29b9d4326b0bf65b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. markmals created this gist Feb 8, 2026.
    37 changes: 37 additions & 0 deletions rr7-use-suspense.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    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>
    );
    }