var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { lazy, Suspense } from \"solid-js\";\n\nconst Greeting = lazy(async () => {\n  // 遅延をシミュレート\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  // 遅延をシミュレート\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 = "`lazy` と `createResource` はそれぞれ単独で使用できますが、Solid は複数の非同期イベントの表示を連携するメカニズムも提供します。`Suspense` は、これらの非同期イベントが解決すると、部分的にロードされたコンテンツの代わりにフォールバックのプレースホルダーを表示できる境界として機能します。\n\nこれにより、中間および部分的なローディング状態が多すぎるために発生する視覚的なジャンクを取り除くことで、ユーザーエクスペリエンスを向上させることができます。`Suspense` は、子孫の非同期な読み取りを自動的に検出し、それに応じて動作します。必要な数の `Suspense` コンポーネントをネストでき、ローディング状態が検出されると、最も近い祖先だけがフォールバックに変換されます。\n\n遅延ロードの例に `Suspense` コンポーネントを追加してみましょう。\n\n```jsx\n<>\n  <h1>Welcome</h1>\n  <Suspense fallback={<p>Loading...</p>}>\n    <Greeting name=\"Jake\" />\n  </Suspense>\n</>\n```\n\nこれで、ローディングのプレースホルダーができました。\n\n重要なのは、`Suspense` をトリガーするのは、非同期派生値の読み取りであるということです。非同期フェッチそのものではありません。Resource の Signal（`lazy` コンポーネントを含む）が `Suspense` の境界の下で読み取られない場合、サスペンドしません。\n\n`Suspense` は多くの意味で、両方のブランチをレンダリングする `Show` コンポーネントに過ぎません。`Suspense` は非同期のサーバーレンダリングには欠かせないものですが、クライアントレンダリングされたコードにすぐに使う必要はありません。Solid のきめ細かなレンダリングは、手動で物事を分割するための追加コストはありません。\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\nSolid の作業はすべて独立してキューに入っています。Time Slicing のようなものは必要ありません。\n";
var async_suspense = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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