6 files changed, 106 insertions, 0 deletions
diff --git a/preact/demo/nested-suspense/addnewcomponent.js b/preact/demo/nested-suspense/addnewcomponent.js
new file mode 100644
index 0000000..e3e4695
--- /dev/null
+++ b/preact/demo/nested-suspense/addnewcomponent.js
@@ -0,0 +1,5 @@
+import { createElement } from 'react';
+
+export default function AddNewComponent({ appearance }) {
+	return <div>AddNewComponent (component #{appearance})</div>;
+}
diff --git a/preact/demo/nested-suspense/component-container.js b/preact/demo/nested-suspense/component-container.js
new file mode 100644
index 0000000..b1da87b
--- /dev/null
+++ b/preact/demo/nested-suspense/component-container.js
@@ -0,0 +1,17 @@
+import { createElement, lazy } from 'react';
+
+const pause = timeout =>
+	new Promise(d => setTimeout(d, timeout), console.log(timeout));
+
+const SubComponent = lazy(() =>
+	pause(Math.random() * 1000).then(() => import('./subcomponent.js'))
+);
+
+export default function ComponentContainer({ appearance }) {
+	return (
+		<div>
+			GenerateComponents (component #{appearance})
+			<SubComponent />
+		</div>
+	);
+}
diff --git a/preact/demo/nested-suspense/dropzone.js b/preact/demo/nested-suspense/dropzone.js
new file mode 100644
index 0000000..c4a28b4
--- /dev/null
+++ b/preact/demo/nested-suspense/dropzone.js
@@ -0,0 +1,5 @@
+import { createElement } from 'react';
+
+export default function DropZone({ appearance }) {
+	return <div>DropZone (component #{appearance})</div>;
+}
diff --git a/preact/demo/nested-suspense/editor.js b/preact/demo/nested-suspense/editor.js
new file mode 100644
index 0000000..253d130
--- /dev/null
+++ b/preact/demo/nested-suspense/editor.js
@@ -0,0 +1,5 @@
+import { createElement } from 'react';
+
+export default function Editor({ children }) {
+	return <div className="Editor">{children}</div>;
+}
diff --git a/preact/demo/nested-suspense/index.js b/preact/demo/nested-suspense/index.js
new file mode 100644
index 0000000..6c525b3
--- /dev/null
+++ b/preact/demo/nested-suspense/index.js
@@ -0,0 +1,69 @@
+import { createElement, Suspense, lazy, Component } from 'react';
+
+const Loading = function() {
+	return <div>Loading...</div>;
+};
+const Error = function({ resetState }) {
+	return (
+		<div>
+			Error!&nbsp;
+			<a onClick={resetState} href="#">
+				Reset app
+			</a>
+		</div>
+	);
+};
+
+const pause = timeout =>
+	new Promise(d => setTimeout(d, timeout), console.log(timeout));
+
+const DropZone = lazy(() =>
+	pause(Math.random() * 1000).then(() => import('./dropzone.js'))
+);
+const Editor = lazy(() =>
+	pause(Math.random() * 1000).then(() => import('./editor.js'))
+);
+const AddNewComponent = lazy(() =>
+	pause(Math.random() * 1000).then(() => import('./addnewcomponent.js'))
+);
+const GenerateComponents = lazy(() =>
+	pause(Math.random() * 1000).then(() => import('./component-container.js'))
+);
+
+export default class App extends Component {
+	state = { hasError: false };
+
+	static getDerivedStateFromError(error) {
+		// Update state so the next render will show the fallback UI.
+		console.warn(error);
+		return { hasError: true };
+	}
+
+	render() {
+		return this.state.hasError ? (
+			<Error resetState={() => this.setState({ hasError: false })} />
+		) : (
+			<Suspense fallback={<Loading />}>
+				<DropZone appearance={0} />
+				<Editor title="APP_TITLE">
+					<main>
+						<Suspense fallback={<Loading />}>
+							<GenerateComponents appearance={1} />
+						</Suspense>
+						<AddNewComponent appearance={2} />
+					</main>
+					<aside>
+						<section>
+							<Suspense fallback={<Loading />}>
+								<GenerateComponents appearance={3} />
+							</Suspense>
+							<AddNewComponent appearance={4} />
+						</section>
+					</aside>
+				</Editor>
+
+				<footer>Footer here</footer>
+			</Suspense>
+		);
+	}
+}
diff --git a/preact/demo/nested-suspense/subcomponent.js b/preact/demo/nested-suspense/subcomponent.js
new file mode 100644
index 0000000..74d6d1d
--- /dev/null
+++ b/preact/demo/nested-suspense/subcomponent.js
@@ -0,0 +1,5 @@
+import { createElement } from 'react';
+
+export default function SubComponent({ onClick }) {
+	return <div>Lazy loaded sub component</div>;
+}