mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
3.2 KiB
JSON
17 lines
3.2 KiB
JSON
{
|
|
"id": "8d981150ac3f1a7d555b77d4",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "suspense-list",
|
|
"content": "---\ntitle: \u003cSuspenseList\u003e\norder: 5\nuse_cases: \u003e-\n coordinating loading, multiple async, loading sequences, layout stability,\n parallel data fetching\ntags:\n - suspense\n - async\n - loading\n - coordination\n - experimental\n - components\nversion: '1.0'\ndescription: \u003e-\n Coordinate multiple Suspense components in SolidJS. Control reveal order and\n manage loading states for parallel async operations smoothly.\n---\n\nSuspenseList 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.\n\n```ts\nimport { SuspenseList } from \"solid-js\"\nimport type { JSX } from \"solid-js\"\n\nfunction SuspenseList(props: {\n\tchildren: JSX.Element\n\trevealOrder: \"forwards\" | \"backwards\" | \"together\"\n\ttail?: \"collapsed\" | \"hidden\"\n}): JSX.Element\n```\n\n**Note**: SuspenseList is still in the experimental stage and does not have full `SSR` support.\n\nHere's an example of how to use SuspenseList:\n\n```tsx\n\u003cSuspenseList revealOrder=\"forwards\" tail=\"collapsed\"\u003e\n\t\u003cProfileDetails user={resource.user} /\u003e\n\t\u003cSuspense fallback={\u003ch2\u003eLoading posts...\u003c/h2\u003e}\u003e\n\t\t\u003cProfileTimeline posts={resource.posts} /\u003e\n\t\u003c/Suspense\u003e\n\t\u003cSuspense fallback={\u003ch2\u003eLoading fun facts...\u003c/h2\u003e}\u003e\n\t\t\u003cProfileTrivia trivia={resource.trivia} /\u003e\n\t\u003c/Suspense\u003e\n\u003c/SuspenseList\u003e\n```\n\n## Props\n\n| Name | Type | Default | Description |\n| ------------- | ----------------------------------------- | ------------ | --------------------------------------------------------------------------- |\n| `revealOrder` | `\"forwards\" \\| \"backwards\" \\| \"together\"` | `\"forwards\"` | Determines the order in which the SuspenseList children should be revealed. |\n| `tail` | `\"collapsed\" \\| \"hidden\"` | `undefined` | TODO |\n\n### `revealOrder`\n\n`\"forwards\" | \"backwards\" | \"together\"`\n\n- `\"forwards\"`: Reveals each item in the list once the previous item has finished rendering. This is the default.\n- `\"backwards\"`: Reveals each item in the list once the next item has finished rendering.\n- `\"together\"`: Reveals all items in the list at the same time.\n\n### `tail`\n\n`\"collapsed\" | \"hidden\"`",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/suspense-list.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/components/suspense-list.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2371,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "6e8ed53dc2138ea69a260eda1627390209219059da9c420d3f293de6275e7ba3",
|
|
"timestamp": "2026-02-23T11:43:00.189178169+01:00"
|
|
} |