feat(performance): Show loading indicator while app loads (#221)

* feat(performance): lazy-load bootstrap

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

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')

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

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

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]),
       ]}