var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { lazy, Suspense } from \"solid-js\";\n\nconst Greeting = lazy(async () => {\n  // simulate delay\n  await new Promise(r => setTimeout(r, 1000))\n  return import(\"./greeting\")\n});\n\nfunction App() {\n  return (\n    <>\n      <h1>Welcome</h1>\n      <Greeting name=\"Jake\" />\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "greeting",
			content: "export default function Greeting(props) {\n  return <h3>Hi, {props.name}</h3>\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { lazy, Suspense } from \"solid-js\";\n\nconst Greeting = lazy(async () => {\n  // simulate delay\n  await new Promise(r => setTimeout(r, 1000))\n  return import(\"./greeting\")\n});\n\nfunction App() {\n  return (\n    <>\n      <h1>Welcome</h1>\n      <Suspense fallback={<p>Loading...</p>}>\n        <Greeting name=\"Jake\" />\n      </Suspense>\n    </>\n  );\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "greeting",
			content: "export default function Greeting(props) {\n  return <h3>Hi, {props.name}</h3>\n}"
		}
	]
};
var markdown = "Während `lazy` und `createResource` auch allein benutzt werden können, bringt Solid einen Mechanismus mit, um koordiniert unterschiedliche asynchrone Events anzuzeigen. `Suspense` dient als Begrenzung, die ein Fallback anstelle eines teilweise geladenen Inhalts anzeigt, bis alle asynchronen Anfragen darin beantwortet sind.\n\nDas kann die Nutzererfahrung verbessern, indem visuelles Stottern, das durch zu viele partielle Ladezustände ausgelöst wird, entfernt wird. `Suspense` erkennt automatisch alle Nachkommen, die asynchron sind und handelt entsprechend. Man kann so viele `Suspense`-Komponenten schachteln, wie man möchte und nur der nächste Vorfahr wird zum Fallback transformiert, wenn der Ladezustand erkannt wurde.\n\nFügen wir eine `Suspense`-Komponente zu unserem Nachlade-Beispiel hinzu:\n\n```jsx\n<>\n  <h1>Welcome</h1>\n  <Suspense fallback={<p>Loading...</p>}>\n    <Greeting name=\"Jake\" />\n  </Suspense>\n</>\n```\n\nSchon haben wir einen Lade-Platzhalter.\n\nEs ist wichtig, sich zu merken, dass es das Lesen einer von einem asynchronen Wert abgeleiteten reaktiven Funktion ist, die `Suspense` auslöst und nicht die asynchrone Abfrage selbst. Wenn ein Ressourcen-Signal (einschließlich `lazy`-Komponenten) nicht innerhalb der `Suspense`-Grenzen gelesen wird, wird es nicht von dessem Effekt betroffen sein.\n\n`Suspense` ist in vielerlei Hinsicht nur wie eine `Show`-Komponente, die beide Zweige rendert. Während `Suspense` wichtig für asynchrones Server-Rendering ist, sollte man sich nicht verpflichtet fühlen, es zu nutzen, wenn alles im Client gerendert wird. Solids feingranulares Rendering hat keine zusätzlichen Kosten für das manuelle Aufspalten von Dingen.\n\n```jsx\nfunction Deferred(props) {\n  const [resume, setResume] = createSignal(false);\n  setTimeout(() => setResume(true), 0);\n\n  return <Show when={resume()}>{props.children}</Show>;\n}\n```\n\nAlle Arbeit in Solid ist bereits unabhängig voneinander geordnet, daher benötigt man keine Lösungen wie Zeiteinteilung.\n";
var async_suspense = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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