Loading

A read of async data that hasn't arrived yet has to wait somewhere. Loading marks that place: until everything inside it is ready, it shows its fallback instead.

<Loading fallback={<p>Loading forecast...</p>}>
  <Forecast city={city()} />
</Loading>

Content outside the boundary doesn't wait. Wrap the smallest region that needs the data, and the rest of the page appears immediately.

After the first load, a boundary keeps its content on screen during updates. For a forecast that's wrong: the old city's weather shouldn't sit there while another city loads. The on prop shows the fallback again whenever the values it reads change:

<Loading on={city()} fallback={<p>Loading forecast...</p>}>

Try it: with no boundary, the whole app waits a second and a half, heading included, and the console warns ASYNC_OUTSIDE_LOADING_BOUNDARY. Wrap Forecast in Loading with a fallback, then reset the preview: the heading and select should appear at once. Then add on={city()} so a new city shows the fallback too.