From ad8396aae4c3455e869defbdc02d9dcf5397aa97 Mon Sep 17 00:00:00 2001
From: JosiahFu <josiahfu@gmail.com>
Date: Wed, 20 Mar 2024 21:46:16 -0700
Subject: [PATCH] Dynamic import PicklistApp to improve loading times and
 module sizes

---
 client/src/main.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/src/main.tsx b/client/src/main.tsx
index 9482d6d..1861dc3 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import 'react-select-search/style.css';
@@ -12,13 +12,14 @@ import PitApp from './apps/pit/PitApp';
 import ReconApp from './apps/recon/ReconApp';
 import SuperApp from './apps/super/SuperApp';
 import PublicApp from './apps/public/PublicApp';
-import PicklistApp from './apps/picklist/PicklistApp';
 import 'react-material-symbols/rounded';
 import Games from './apps/games/Games';
 import ScoringCalculator from './apps/score_calculator/ScoreCalculator';
 
 import { registerSW } from 'virtual:pwa-register';
 
+const PicklistApp = lazy(() => import('./apps/picklist/PicklistApp'));
+
 // Automatically reloads the page a second time to update the SW
 registerSW();
 
@@ -57,7 +58,11 @@ const router = createBrowserRouter([
             },
             {
                 path: 'picklist',
-                element: <PicklistApp />,
+                element: (
+                    <Suspense fallback={<p>Loading</p>}>
+                        <PicklistApp />
+                    </Suspense>
+                ),
             },
             {
                 path: 'games',