diff --git a/src/Bootstrap.js b/src/Bootstrap.js new file mode 100644 index 0000000..cb401fe --- /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 6e0880e..3a053c8 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>('localforage') diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx index 73bd76d..8fe87df 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 = ({ ) } + +export default Bootstrap diff --git a/src/Init.tsx b/src/Init.tsx index c8433d7..101db55 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 { getUuid?: typeof uuid @@ -74,7 +77,11 @@ const Init = ({ getUuid = uuid, ...props }: InitProps) => { return } - return + return ( + }> + + + ) } export default Init diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx index 3f44626..119492b 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]), ]}