<React.Suspense> lets a component pause while it waits for something — code, data, an image — and shows a fallback in the meantime.
<React.Suspense fallback={<p>Loading...</p>}>
<Profile />
</React.Suspense>
Anywhere inside <Profile> (or deeper), if a component "throws a promise", React catches it, renders the fallback, and re-tries when the promise resolves.
In production you'd usually pair this with React.lazy(() => import('./Profile')) for code splitting — the component's code is fetched only when first rendered.
Your Task
A greetingResource is already created in the starter — calling .read() either returns the value or suspends. You don't need to touch it.
- Build a
Greeting component that calls greetingResource.read() and renders the result in <p id="message">
- In
App, wrap <Greeting /> in <React.Suspense> with fallback <p id="loading">Loading...</p>