var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { Suspense } from \"solid-js\";\n\nimport fetchProfileData from \"./mock-api\";\nimport ProfilePage from \"./profile\";\n\nconst App = () => {\n  const { user, posts, trivia } = fetchProfileData();\n  return (\n    <Suspense fallback={<h1>Loading...</h1>}>\n      <ProfilePage user={user()} posts={posts()} trivia={trivia()} />\n    </Suspense>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		},
		{
			name: "profile",
			content: "import { For, Suspense, SuspenseList } from \"solid-js\";\n\nconst ProfileDetails = (props) => <h1>{props.user?.name}</h1>;\n\nconst ProfileTimeline = (props) => (\n  <ul>\n    <For each={props.posts}>{(post) => <li>{post.text}</li>}</For>\n  </ul>\n);\n\nconst ProfileTrivia = (props) => (\n  <>\n    <h2>Fun Facts</h2>\n    <ul>\n      <For each={props.trivia}>{(fact) => <li>{fact.text}</li>}</For>\n    </ul>\n  </>\n);\n\nconst ProfilePage = (props) => (\n  <>\n    <ProfileDetails user={props.user} />\n    <Suspense fallback={<h2>Loading posts...</h2>}>\n      <ProfileTimeline posts={props.posts} />\n    </Suspense>\n    <Suspense fallback={<h2>Loading fun facts...</h2>}>\n      <ProfileTrivia trivia={props.trivia} />\n    </Suspense>\n  </>\n);\n\nexport default ProfilePage;"
		},
		{
			name: "mock-api",
			content: "import { createResource } from \"solid-js\";\n\nexport default function fetchProfileData() {\n  const [user] = createResource(fetchUser);\n  const [posts] = createResource(fetchPosts);\n  const [trivia] = createResource(fetchTrivia);\n  return { user, posts, trivia };\n}\n\nfunction fetchUser() {\n  console.log(\"fetch user...\");\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      console.log(\"fetched user\");\n      resolve({\n        name: \"Ringo Starr\"\n      });\n    }, 500);\n  });\n}\n\nlet ringoPosts = [\n  {\n    id: 0,\n    text: \"I get by with a little help from my friends\"\n  },\n  {\n    id: 1,\n    text: \"I'd like to be under the sea in an octupus's garden\"\n  },\n  {\n    id: 2,\n    text: \"You got that sand all over your feet\"\n  }\n];\n\nfunction fetchPosts() {\n  let ringoPostsAtTheTime = ringoPosts;\n  console.log(\"fetch posts...\");\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      console.log(\"fetched posts\");\n      resolve(ringoPostsAtTheTime);\n    }, 3000 * Math.random());\n  });\n}\n\nfunction fetchTrivia() {\n  console.log(\"fetch trivia...\");\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      console.log(\"fetched trivia\");\n      resolve([\n        {\n          id: 1,\n          text:\n            'The nickname \"Ringo\" came from his habit of wearing numerous rings.'\n        },\n        {\n          id: 2,\n          text: \"Plays the drums left-handed with a right-handed drum set.\"\n        },\n        {\n          id: 3,\n          text: \"Nominated for one Daytime Emmy Award, but did not win\"\n        }\n      ]);\n    }, 3000 * Math.random());\n  });\n}\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { Suspense } from \"solid-js\";\n\nimport fetchProfileData from \"./mock-api\";\nimport ProfilePage from \"./profile\";\n\nconst App = () => {\n  const { user, posts, trivia } = fetchProfileData();\n  return (\n    <Suspense fallback={<h1>Loading...</h1>}>\n      <ProfilePage user={user()} posts={posts()} trivia={trivia()} />\n    </Suspense>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		},
		{
			name: "profile",
			content: "import { For, Suspense, SuspenseList } from \"solid-js\";\n\nconst ProfileDetails = (props) => <h1>{props.user?.name}</h1>;\n\nconst ProfileTimeline = (props) => (\n  <ul>\n    <For each={props.posts}>{(post) => <li>{post.text}</li>}</For>\n  </ul>\n);\n\nconst ProfileTrivia = (props) => (\n  <>\n    <h2>Fun Facts</h2>\n    <ul>\n      <For each={props.trivia}>{(fact) => <li>{fact.text}</li>}</For>\n    </ul>\n  </>\n);\n\nconst ProfilePage = (props) => (\n  <SuspenseList revealOrder=\"forwards\" tail=\"collapsed\">\n    <ProfileDetails user={props.user} />\n    <Suspense fallback={<h2>Loading posts...</h2>}>\n      <ProfileTimeline posts={props.posts} />\n    </Suspense>\n    <Suspense fallback={<h2>Loading fun facts...</h2>}>\n      <ProfileTrivia trivia={props.trivia} />\n    </Suspense>\n  </SuspenseList>\n);\n\nexport default ProfilePage;"
		},
		{
			name: "mock-api",
			content: "import { createResource } from \"solid-js\";\n\nexport default function fetchProfileData() {\n  const [user] = createResource(fetchUser);\n  const [posts] = createResource(fetchPosts);\n  const [trivia] = createResource(fetchTrivia);\n  return { user, posts, trivia };\n}\n\nfunction fetchUser() {\n  console.log(\"fetch user...\");\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      console.log(\"fetched user\");\n      resolve({\n        name: \"Ringo Starr\"\n      });\n    }, 500);\n  });\n}\n\nlet ringoPosts = [\n  {\n    id: 0,\n    text: \"I get by with a little help from my friends\"\n  },\n  {\n    id: 1,\n    text: \"I'd like to be under the sea in an octupus's garden\"\n  },\n  {\n    id: 2,\n    text: \"You got that sand all over your feet\"\n  }\n];\n\nfunction fetchPosts() {\n  let ringoPostsAtTheTime = ringoPosts;\n  console.log(\"fetch posts...\");\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      console.log(\"fetched posts\");\n      resolve(ringoPostsAtTheTime);\n    }, 3000 * Math.random());\n  });\n}\n\nfunction fetchTrivia() {\n  console.log(\"fetch trivia...\");\n  return new Promise((resolve) => {\n    setTimeout(() => {\n      console.log(\"fetched trivia\");\n      resolve([\n        {\n          id: 1,\n          text:\n            'The nickname \"Ringo\" came from his habit of wearing numerous rings.'\n        },\n        {\n          id: 2,\n          text: \"Plays the drums left-handed with a right-handed drum set.\"\n        },\n        {\n          id: 3,\n          text: \"Nominated for one Daytime Emmy Award, but did not win\"\n        }\n      ]);\n    }, 3000 * Math.random());\n  });\n}\n"
		}
	]
};
var markdown = "Manchmal hat man mehrere `Suspense`-Komponenten, die man koordinieren möchte. Ein möglicher Ansatz ist, alles unter ein einzelnes `Suspense` zu packen, aber das limitiert uns zu einem einzigen Ladeschritt. Ein einzelner Fallback-Zustand bedeutet, dass alles immer warten muss, bis der letzte Teil geladen ist. Stattdessen bietet Solid die `SuspenseList`-Komponente, um das Laden zu koordinieren.\n\nMan stelle sich vor, es gibt mehrere `Suspense`-Komponenten wie in unserem Beispiel. Wenn wir sie in eine `SuspenseList` kapseln, die mit der `revealOrder` auf `forwards` eingestellt ist, werden sie in der Reihenfolge, in der sie in der Komponentenstruktur stehen, dargestellt, unabhängig davon, in welcher Reihenfolge sie geladen werden. Das reduziert das Herumspringen der Seite. Man kann `revealOrder` auf `backwards` oder `together` setzen, was die Reihenfolge umkehrt oder wartet, bis alle `Suspense`-Komponenten geladen sind. Zusätzlich gibt es eine `tail`-Option, die man auf `hidden` oder `collapsed` setzen kann. Das überschreibt das normale Verhalten, alle Fallbacks anzuzeigen, damit, kein oder nur das nächste Fallback anzuzeigen, in der Reihenfolge, die `revealOrder` vorgibt.\n\nUnser Beispiel ist derzeit ein wenig unordentlich, was Lade-Platzhalter angeht. Während es alle Daten unabhängig voneinander lädt, zeigen wir oft mehrere Platzhalter an, je nachdem, in welcher Reihenfolge geladen wird. Schachteln wir unsere `ProfilePage`-Komponenten im JSX in eine `<SuspenseList>`:\n\n```jsx\n<SuspenseList revealOrder=\"forwards\" tail=\"collapsed\">\n  <ProfileDetails user={props.user} />\n  <Suspense fallback={<h2>Loading posts...</h2>}>\n    <ProfileTimeline posts={props.posts} />\n  </Suspense>\n  <Suspense fallback={<h2>Loading fun facts...</h2>}>\n    <ProfileTrivia trivia={props.trivia} />\n  </Suspense>\n</SuspenseList>\n```\n";
var async_suspense_list = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { async_suspense_list as default, lesson, markdown, solved };
