From 4a9cae9cb6f59d9d869a8107c898216b8b65eb5c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 4 Mar 2024 16:37:34 +0800
Subject: [PATCH] Experiment some Suspense

This splits code, lazy load the other less-critical components
---
 src/app.jsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index aa9d1ee5..8e39b0e0 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,6 +1,7 @@
 import './app.css';
 
 import debounce from 'just-debounce-it';
+import { lazy, Suspense } from 'preact/compat';
 import {
   useEffect,
   useLayoutEffect,
@@ -17,14 +18,14 @@ import ComposeButton from './components/compose-button';
 import { ICONS } from './components/ICONS';
 import KeyboardShortcutsHelp from './components/keyboard-shortcuts-help';
 import Loader from './components/loader';
-import Modals from './components/modals';
+// import Modals from './components/modals';
 import NotificationService from './components/notification-service';
 import SearchCommand from './components/search-command';
 import Shortcuts from './components/shortcuts';
 import NotFound from './pages/404';
 import AccountStatuses from './pages/account-statuses';
 import Bookmarks from './pages/bookmarks';
-import Catchup from './pages/catchup';
+// import Catchup from './pages/catchup';
 import Favourites from './pages/favourites';
 import FollowedHashtags from './pages/followed-hashtags';
 import Following from './pages/following';
@@ -55,6 +56,9 @@ import store from './utils/store';
 import { getCurrentAccount } from './utils/store-utils';
 import './utils/toast-alert';
 
+const Catchup = lazy(() => import('./pages/catchup'));
+const Modals = lazy(() => import('./components/modals'));
+
 window.__STATES__ = states;
 window.__STATES_STATS__ = () => {
   const keys = [
@@ -382,7 +386,9 @@ function App() {
       )}
       {isLoggedIn && <ComposeButton />}
       {isLoggedIn && <Shortcuts />}
-      <Modals />
+      <Suspense>
+        <Modals />
+      </Suspense>
       {isLoggedIn && <NotificationService />}
       <BackgroundService isLoggedIn={isLoggedIn} />
       {uiState !== 'loading' && <SearchCommand onClose={focusDeck} />}
@@ -458,7 +464,14 @@ function SecondaryRoutes({ isLoggedIn }) {
             <Route path=":id" element={<List />} />
           </Route>
           <Route path="/ft" element={<FollowedHashtags />} />
-          <Route path="/catchup" element={<Catchup />} />
+          <Route
+            path="/catchup"
+            element={
+              <Suspense>
+                <Catchup />
+              </Suspense>
+            }
+          />
         </>
       )}
       <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />