From c6cd534efb200ec54a313957b2094751cc642152 Mon Sep 17 00:00:00 2001
From: Mat Sz <contact@matsz.dev>
Date: Thu, 26 Oct 2023 18:10:19 +0200
Subject: [PATCH] enable bundle splitting

---
 web/src/App.tsx                          | 67 +++++++++++++-----------
 web/src/screens/About.tsx                |  2 +
 web/src/screens/Abuse.tsx                |  2 +
 web/src/screens/Home.tsx                 |  9 ++--
 web/src/screens/Privacy.tsx              |  2 +
 web/src/screens/TechnicalInformation.tsx |  2 +
 web/src/screens/ToS.tsx                  |  2 +
 web/src/sections/Connect/index.tsx       |  2 +
 8 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 492492e..c7ebf0e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Router, Route, Switch } from 'wouter';
 import { useTranslation } from 'react-i18not';
 
@@ -6,14 +6,17 @@ import './App.scss';
 
 import { Home } from './screens/Home.js';
 import { Redirect } from './screens/Redirect.js';
-import { Privacy } from './screens/Privacy.js';
-import { ToS } from './screens/ToS.js';
-import { Abuse } from './screens/Abuse.js';
-import { About } from './screens/About.js';
-import { TechnicalInformation } from './screens/TechnicalInformation.js';
 import { Header } from './components/Header.js';
 import { Status } from './components/Status.js';
 
+const Abuse = React.lazy(() => import('./screens/Abuse.js'));
+const TechnicalInformation = React.lazy(
+  () => import('./screens/TechnicalInformation.js')
+);
+const ToS = React.lazy(() => import('./screens/ToS.js'));
+const Privacy = React.lazy(() => import('./screens/Privacy.js'));
+const About = React.lazy(() => import('./screens/About.js'));
+
 export const App: React.FC = () => {
   const { dir } = useTranslation();
   document.body.dir = dir;
@@ -22,31 +25,33 @@ export const App: React.FC = () => {
     <div className="app">
       <Header />
       <Status />
-      <Router>
-        <Switch>
-          <Route path="/abuse">
-            <Abuse />
-          </Route>
-          <Route path="/about">
-            <About />
-          </Route>
-          <Route path="/privacy">
-            <Privacy />
-          </Route>
-          <Route path="/tos">
-            <ToS />
-          </Route>
-          <Route path="/tech">
-            <TechnicalInformation />
-          </Route>
-          <Route path="/:networkName">
-            <Home />
-          </Route>
-          <Route>
-            <Redirect />
-          </Route>
-        </Switch>
-      </Router>
+      <Suspense>
+        <Router>
+          <Switch>
+            <Route path="/abuse">
+              <Abuse />
+            </Route>
+            <Route path="/about">
+              <About />
+            </Route>
+            <Route path="/privacy">
+              <Privacy />
+            </Route>
+            <Route path="/tos">
+              <ToS />
+            </Route>
+            <Route path="/tech">
+              <TechnicalInformation />
+            </Route>
+            <Route path="/:networkName">
+              <Home />
+            </Route>
+            <Route>
+              <Redirect />
+            </Route>
+          </Switch>
+        </Router>
+      </Suspense>
     </div>
   );
 };
diff --git a/web/src/screens/About.tsx b/web/src/screens/About.tsx
index 279f9e1..73570d0 100644
--- a/web/src/screens/About.tsx
+++ b/web/src/screens/About.tsx
@@ -48,3 +48,5 @@ export const About: React.FC = () => {
     </TextSection>
   );
 };
+
+export default About;
diff --git a/web/src/screens/Abuse.tsx b/web/src/screens/Abuse.tsx
index 5e8c58f..d748822 100644
--- a/web/src/screens/Abuse.tsx
+++ b/web/src/screens/Abuse.tsx
@@ -29,3 +29,5 @@ export const Abuse: React.FC = observer(() => {
     </TextSection>
   );
 });
+
+export default Abuse;
diff --git a/web/src/screens/Home.tsx b/web/src/screens/Home.tsx
index 8185e3b..fcd542f 100644
--- a/web/src/screens/Home.tsx
+++ b/web/src/screens/Home.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useParams } from 'wouter';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18not';
@@ -14,11 +14,12 @@ import { YourTileSection } from '../sections/YourTile/index.js';
 import { NoticeSection } from '../sections/Notice/index.js';
 import { NetworkSection } from '../sections/Network/index.js';
 import { TransfersSection } from '../sections/Transfers/index.js';
-import { ConnectSection } from '../sections/Connect/index.js';
 import { ChatSection } from '../sections/Chat/index.js';
 import { MobileTabs } from '../sections/MobileTabs/index.js';
 import { SettingsSection } from '../sections/Settings/index.js';
 
+const ConnectSection = React.lazy(() => import('../sections/Connect/index.js'));
+
 function itemToString(item: DataTransferItem): Promise<string> {
   return new Promise(resolve => {
     item.getAsString(resolve);
@@ -142,7 +143,9 @@ export const Home: React.FC = observer(() => {
               mobileHidden: tab !== 'connect',
             })}
           >
-            <ConnectSection />
+            <Suspense>
+              <ConnectSection />
+            </Suspense>
           </div>
           <div
             className={clsx('mobileFlex', {
diff --git a/web/src/screens/Privacy.tsx b/web/src/screens/Privacy.tsx
index 15d0550..3648cc0 100644
--- a/web/src/screens/Privacy.tsx
+++ b/web/src/screens/Privacy.tsx
@@ -44,3 +44,5 @@ export const Privacy: React.FC = () => {
     </TextSection>
   );
 };
+
+export default Privacy;
diff --git a/web/src/screens/TechnicalInformation.tsx b/web/src/screens/TechnicalInformation.tsx
index 49e62fe..a3873b3 100644
--- a/web/src/screens/TechnicalInformation.tsx
+++ b/web/src/screens/TechnicalInformation.tsx
@@ -27,3 +27,5 @@ export const TechnicalInformation: React.FC = observer(() => {
     </TextSection>
   );
 });
+
+export default TechnicalInformation;
diff --git a/web/src/screens/ToS.tsx b/web/src/screens/ToS.tsx
index a3b7b29..a92f264 100644
--- a/web/src/screens/ToS.tsx
+++ b/web/src/screens/ToS.tsx
@@ -106,3 +106,5 @@ export const ToS: React.FC = () => {
     </TextSection>
   );
 };
+
+export default ToS;
diff --git a/web/src/sections/Connect/index.tsx b/web/src/sections/Connect/index.tsx
index ff0d29c..10a52be 100644
--- a/web/src/sections/Connect/index.tsx
+++ b/web/src/sections/Connect/index.tsx
@@ -56,3 +56,5 @@ export const ConnectSection: React.FC = observer(() => {
     </>
   );
 });
+
+export default ConnectSection;