Reveal order

A page with several Loading boundaries shows each region as soon as its data arrives. Data that loads in a random order makes the page jump around.

Reveal coordinates a group of boundaries without delaying any request:

<Reveal order="sequential">
<Loading fallback={<p>Loading profile...</p>}>
<Profile />
</Loading>
<Loading fallback={<p>Loading posts...</p>}>
<Posts />
</Loading>
</Reveal>

With order="sequential", a region appears only after the ones above it. With order="together", the group appears at once when every region is ready. Add collapsed to a sequential group to show only the next fallback in line, instead of a stack of them.

Try it: the fun facts load first and appear above an empty profile. Wrap the three sections in Reveal order="sequential", then try collapsed and order="together".

Loading editor…