<SuspenseList>

SuspenseList allows for coordinating multiple parallel Loading 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.

import { SuspenseList } from "solid-js"
import type { JSX } from "solid-js"

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} />
  <Loading fallback={<h2>Loading posts...</h2>}>
    <ProfileTimeline posts={resource.posts} />
  </Loading>
  <Loading fallback={<h2>Loading fun facts...</h2>}>
    <ProfileTrivia trivia={resource.trivia} />
  </Loading>
</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"