Components

<SuspenseList>

Edit this page

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

NameTypeDefaultDescription
revealOrder"forwards" | "backwards" | "together""forwards"Determines the order in which the SuspenseList children should be revealed.
tail"collapsed" | "hidden"undefinedTODO

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"

Report an issue with this page