From d697aa0482563559c649773d6f0c480d1852bc01 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <me@jeremyckahn.com>
Date: Mon, 11 Dec 2023 17:19:31 -0600
Subject: [PATCH] feat(performance): Show loading indicator while app loads
 (#221)

* feat(performance): lazy-load bootstrap
---
 src/Bootstrap.js                   |  4 ++++
 src/Bootstrap.test.tsx             |  2 +-
 src/Bootstrap.tsx                  |  4 +++-
 src/Init.tsx                       | 13 ++++++++++---
 src/components/Loading/Loading.tsx |  6 +++++-
 5 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 src/Bootstrap.js

diff --git a/src/Bootstrap.js b/src/Bootstrap.js
new file mode 100644
index 000000000..cb401fee2
--- /dev/null
+++ b/src/Bootstrap.js
@@ -0,0 +1,4 @@
+// NOTE: This file is a shim to enable the Bootstrap component to be
+// lazy-loaded.
+import Bootstrap from './Bootstrap.tsx'
+export default Bootstrap
diff --git a/src/Bootstrap.test.tsx b/src/Bootstrap.test.tsx
index 6e0880e9e..3a053c8d4 100644
--- a/src/Bootstrap.test.tsx
+++ b/src/Bootstrap.test.tsx
@@ -9,7 +9,7 @@ import {
 } from 'test-utils/mocks/mockSerializationService'
 import { userSettingsStubFactory } from 'test-utils/stubs/userSettings'
 
-import { Bootstrap, BootstrapProps } from './Bootstrap'
+import Bootstrap, { BootstrapProps } from './Bootstrap'
 
 const mockPersistedStorage =
   jest.createMockFromModule<jest.Mock<typeof localforage>>('localforage')
diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index 73bd76d39..8fe87dfa1 100644
--- a/src/Bootstrap.tsx
+++ b/src/Bootstrap.tsx
@@ -76,7 +76,7 @@ const getConfigFromSdk = () => {
   })
 }
 
-export const Bootstrap = ({
+const Bootstrap = ({
   persistedStorage: persistedStorageProp = localforage.createInstance({
     name: 'chitchatter',
     description: 'Persisted settings data for chitchatter',
@@ -264,3 +264,5 @@ export const Bootstrap = ({
     </Router>
   )
 }
+
+export default Bootstrap
diff --git a/src/Init.tsx b/src/Init.tsx
index c8433d711..101db55c4 100644
--- a/src/Init.tsx
+++ b/src/Init.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { lazy, Suspense, useEffect, useState } from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import { v4 as uuid } from 'uuid'
@@ -11,7 +11,10 @@ import {
 import { WholePageLoading } from 'components/Loading/Loading'
 import { ColorMode, UserSettings } from 'models/settings'
 
-import { Bootstrap, BootstrapProps } from './Bootstrap'
+import type { BootstrapProps } from './Bootstrap'
+
+// @ts-expect-error
+const Bootstrap = lazy(() => import('./Bootstrap.js'))
 
 export interface InitProps extends Omit<BootstrapProps, 'initialUserSettings'> {
   getUuid?: typeof uuid
@@ -74,7 +77,11 @@ const Init = ({ getUuid = uuid, ...props }: InitProps) => {
     return <WholePageLoading />
   }
 
-  return <Bootstrap {...props} initialUserSettings={userSettings} />
+  return (
+    <Suspense fallback={<WholePageLoading />}>
+      <Bootstrap {...props} initialUserSettings={userSettings} />
+    </Suspense>
+  )
 }
 
 export default Init
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
index 3f44626f3..119492bcc 100644
--- a/src/components/Loading/Loading.tsx
+++ b/src/components/Loading/Loading.tsx
@@ -14,7 +14,11 @@ export const WholePageLoading = ({
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
-          height: '100vh',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}