<SuspenseList>

SuspenseList allows for coordinating multiple parallel Suspense and SuspenseList components. It controls the order in which content is revealed to reduce layout thrashing and has an option to collapse or hide fallback states.

function SuspenseList(props: {
  children: JSX.Element
  revealOrder: "forwards" | "backwards" | "together"
  tail?: "collapsed" | "hidden"
}): JSX.Element

Note: SuspenseList is still in the experimental stage and does not have full SSR support.

Here's an example of how to use SuspenseList:

<SuspenseList revealOrder="forwards" tail="collapsed">
  <ProfileDetails user={resource.user} />
  <Suspense fallback={<h2>Loading posts...</h2>}>
    <ProfileTimeline posts={resource.posts} />
  </Suspense>
  <Suspense fallback={<h2>Loading fun facts...</h2>}>
    <ProfileTrivia trivia={resource.trivia} />
  </Suspense>
</SuspenseList>

Props

revealOrder

"forwards" | "backwards" | "together"

• "forwards": Reveals each item in the list once the previous item has finished rendering. This is the default.
• "backwards": Reveals each item in the list once the next item has finished rendering.
• "together": Reveals all items in the list at the same time.

tail

"collapsed" | "hidden"