matrix-moderation-widget

commit e29284845ae1ada3d71a032c669c5daa5b9c4b50
parent c71c9f275a68fabd21b57efbcdf859cafaee3adb
Author: MTRNord <mtrnord1@gmail.com>
Date:   Fri, 20 May 2022 16:48:36 +0200

Use Suspense for the pages to make it just a little cheaper

Diffstat:
M
src/components/App.tsx
 | 
26
+++++++++++++++++++-------

1 file changed, 19 insertions(+), 7 deletions(-)
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,7 +1,7 @@
-import { PureComponent } from 'react';
-import BanList from './Banlist';
-import Home from './Home';
-import NewRoom from './NewRoom';
+import React, { PureComponent, Suspense } from 'react';
+const BanList = React.lazy(() => import('./Banlist'));
+const Home = React.lazy(() => import('./Home'));
+const NewRoom = React.lazy(() => import('./NewRoom'));
 
 type Pages = "banlist" | "home" | "new_room";
 
@@ -39,13 +39,25 @@ class App extends PureComponent<Props, State> {
   getPage(page: Pages) {
     switch (page) {
       case "home": {
-        return <Home />;
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            <Home />
+          </Suspense>
+        );
       }
       case "banlist": {
-        return <BanList />;
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            <BanList />
+          </Suspense>
+        );
       }
       case "new_room": {
-        return <NewRoom />;
+        return (
+          <Suspense fallback={<div>Loading...</div>}>
+            <NewRoom />
+          </Suspense>
+        );
       }
     }
   }