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 = "Несмотря на то, что `lazy` и `createResource` могут быть использованы независимо, Solid имеет механизм для координации нескольких асинхронных событий. `Suspense` позволяет нам показывать заглушку (`fallback`), до тех пор пока мы полностью не выполним асинхронные события в нашем компоненте.\n\nЭто может улучшить пользовательский опыт, так как убирает лишнюю визуализацию данных в пограничных состояниях загрузки и скачки контента. `Suspense` автоматически определяет все асинхронные чтения и координирует отрисовку. Вы можете использовать неограниченное количество `Suspense` компонентов в вашем коде и только ближайший будет использовать заглушку, когда Solid найдет ближайший `loading` `Сигнал`. \n\nДавайте добавим компонент `Suspense` в наш пример с ленивой загрузкой (`lazy loading`):\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` в работу, а не сам факт запуска асинхронной операции. Если `Ресурс` (включая `lazy` компоненты) не имеет чтения внутри `Suspense`, то он не будет активирован.\n\n`Suspense` можно представить как `Show` компонент, который показывает обе ветки. Несмотря на то, что `Suspense` является обязательным для асинхронного выполнения на сервере (`server rendering`), если вы используете Solid только для рендеринга на стороне клиента (`client rendering`), то использование `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\nВся работа в Solid запускается независимо друг от друга изначально, поэтому в вещах вроде [Time Slicing](https://ru.reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) нет необходимости.\n";
var async_suspense = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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