diff options
Diffstat (limited to 'examples/framework-preact/src')
4 files changed, 15 insertions, 5 deletions
diff --git a/examples/framework-preact/src/components/Counter.css b/examples/framework-preact/src/components/Counter.css index fb21044d7..656b19d42 100644 --- a/examples/framework-preact/src/components/Counter.css +++ b/examples/framework-preact/src/components/Counter.css @@ -5,7 +5,3 @@ margin-top: 2em; place-items: center; } - -.counter-message { - text-align: center; -} diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx index 5d702fb42..f7db88c6d 100644 --- a/examples/framework-preact/src/components/Counter.tsx +++ b/examples/framework-preact/src/components/Counter.tsx @@ -1,6 +1,10 @@ import { h, Fragment } from 'preact'; +import { lazy, Suspense } from 'preact/compat'; import './Counter.css'; +const Message = lazy(async () => import('./Message')); +const Fallback = () => <p>Loading...</p>; + export default function Counter({ children, count }) { const add = () => count.value++; const subtract = () => count.value--; @@ -12,7 +16,9 @@ export default function Counter({ children, count }) { <pre>{count}</pre> <button onClick={add}>+</button> </div> - <div class="counter-message">{children}</div> + <Suspense fallback={Fallback}> + <Message>{children}</Message> + </Suspense> </> ); } diff --git a/examples/framework-preact/src/components/Message.css b/examples/framework-preact/src/components/Message.css new file mode 100644 index 000000000..71ffc2c31 --- /dev/null +++ b/examples/framework-preact/src/components/Message.css @@ -0,0 +1,3 @@ +.message { + text-align: center; +} diff --git a/examples/framework-preact/src/components/Message.tsx b/examples/framework-preact/src/components/Message.tsx new file mode 100644 index 000000000..2ae48d04b --- /dev/null +++ b/examples/framework-preact/src/components/Message.tsx @@ -0,0 +1,5 @@ +import './Message.css'; + +export default function Message({ children }) { + return <div class="message">{children}</div>; +} |