A transition keeps the old tab on screen
The plain click replaces the visible "About page" with the fallback. The transition keeps "posts loaded" on screen (dimmed, with "Switching...") until the photos are ready.
<Suspense fallback={...}> shows a fallback while anything inside it is still loading (lazy code, a promise read with use(), a Suspense-enabled library), lets you nest boundaries to control what appears together, and works with transitions to keep the old screen visible instead of flashing a spinner.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A product page has Details (fast), Reviews (slow) and Recommendations (slowest). Write the JSX so details appear first, and reviews and recommendations each fill in independently.
Load a Settings panel with lazy only when a button is clicked, with a fallback that says Loading settings....
A SearchResults component suspends while results load. Make typing a new query keep the old results visible (dimmed) instead of showing the fallback.
Explain it without notes
What does Suspense do, and what kinds of things can make a component suspend?
How do nested Suspense boundaries control the reveal order? What happens to two components in the same boundary?
Why can a transition prevent a loading fallback from appearing, and when should you use one?
How does lazy work with Suspense?
Preview
Console
Nothing logged yet.Expected console output
plain, 100 ms later: Loading tab...
plain, done: posts loaded
transition, 100 ms later: posts loaded + Switching...
transition, done: photos loaded