SuspenseList coordinates several Suspense boundaries so loading fallbacks appear in a deliberate order instead of shifting the page unpredictably. It is useful when independent data sources, such as bookings and to-dos, resolve at different times. section 13.2 section 13.2.1
Reveal bookings before to-dos
Wrap the boundaries and choose a reveal order:\n\n<SuspenseList revealOrder="forwards">\n <Suspense fallback={<p>Loading user bookings...</p>}>\n <UserBookings id={userID}/>\n </Suspense>\n <Suspense fallback={<p>Loading user todos...</p>}>\n <UserTodos id={userID}/>\n </Suspense>\n</SuspenseList>\n\nWith forwards, bookings appear before to-dos even when the to-dos load first. section 13.2.2
Choose the fallback orchestration that matches the intended user experience:
- Set revealOrder="forwards" to reveal boundaries from top to bottom. section 13.2.2
- Set revealOrder="backwards" to reveal later boundaries first, or "together" to reveal them at the same time. section 13.2.2
- Set tail="collapsed" to show only one fallback at a time, displaying the next fallback after the preceding boundary renders. section 13.2.2
Listing 13.8 Wrap the two Suspense components in a SuspenseList
<SuspenseList #1
revealOrder="forwards" #2
>
<Suspense fallback={<p>Loading user bookings...</p>}>
<UserBookings id={userID}/>
</Suspense>
<Suspense fallback={<p>Loading user todos...</p>}>
<UserTodos id={userID}/>
</Suspense>
</SuspenseList>
#1 Wrap the Suspense components in a SuspenseList.
#2 Specify the revealOrder.
Inspect the focused JSX listing that wraps two Suspense boundaries in SuspenseList and sets revealOrder. section 13.2.2
