From 7676312deeee51546312c7b2c5893e9b7cced625 Mon Sep 17 00:00:00 2001
From: jose-donato <43375532+jose-donato@users.noreply.github.com>
Date: Sun, 14 Jun 2020 22:55:26 +0100
Subject: [PATCH 1/2] Lazy loading with react lazy instead of
 preact-async-route

Updated README.md to perform lazy loading with react lazy function (with examples) instead of the deprecated package preact-async-route.
---
 README.md | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index d9467523..c7acdd04 100644
--- a/README.md
+++ b/README.md
@@ -61,25 +61,27 @@ You can also make params optional by adding a `?` to it.
 
 ### Lazy Loading
 
-Lazy loading (code splitting) with `preact-router` can be implemented easily using the [AsyncRoute](https://www.npmjs.com/package/preact-async-route) module:
-
+~~Lazy loading (code splitting) with `preact-router` can be implemented easily using the [AsyncRoute](https://www.npmjs.com/package/preact-async-route) module~~.
+`preact-async-route` was deprecated and it is now recommended to use lazy components (they are now supported in `preact-x`). They can be used as shown [here](https://reactjs.org/docs/code-splitting.html#reactlazy) and the example below can be found in this codesandbox [url](https://codesandbox.io/s/preact-lazy-loading-x7ker)
 ```js
-import AsyncRoute from 'preact-async-route';
-<Router>
-  <Home path="/" />
-  <AsyncRoute
-    path="/friends"
-    getComponent={ () => import('./friends').then(module => module.default) }
-  />
-  <AsyncRoute
-    path="/friends/:id"
-    getComponent={ () => import('./friend').then(module => module.default) }
-    loading={ () => <div>loading...</div> }
-  />
-</Router>
+import { lazy, Suspense } from "preact/compat";
+import { Router } from "preact-router";
+
+const Home = lazy(() => import("./home"));
+
+function App() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Router>
+          <Home path="/" />
+        </Router>
+      </Suspense>
+    </div>
+  );
+}
 ```
 
-
 ### Active Matching & Links
 
 `preact-router` includes an add-on module called `match` that lets you wire your components up to Router changes.

From fc3683a4d85081d127e5211b4a50e1bbeced8360 Mon Sep 17 00:00:00 2001
From: jose-donato <43375532+jose-donato@users.noreply.github.com>
Date: Mon, 15 Jun 2020 21:29:37 +0100
Subject: [PATCH 2/2] Updated after code review

---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c7acdd04..b4088c08 100644
--- a/README.md
+++ b/README.md
@@ -61,8 +61,7 @@ You can also make params optional by adding a `?` to it.
 
 ### Lazy Loading
 
-~~Lazy loading (code splitting) with `preact-router` can be implemented easily using the [AsyncRoute](https://www.npmjs.com/package/preact-async-route) module~~.
-`preact-async-route` was deprecated and it is now recommended to use lazy components (they are now supported in `preact-x`). They can be used as shown [here](https://reactjs.org/docs/code-splitting.html#reactlazy) and the example below can be found in this codesandbox [url](https://codesandbox.io/s/preact-lazy-loading-x7ker)
+Lazy loading (code splitting) with `preact-router` can be implemented using the `lazy`-component.
 ```js
 import { lazy, Suspense } from "preact/compat";
 import { Router } from "preact-router";