forked from Shiloh/remnantchat
feat(performance): Show loading indicator while app loads (#221)
* feat(performance): lazy-load bootstrap
This commit is contained in:
parent
e962c403a5
commit
d697aa0482
4
src/Bootstrap.js
Normal file
4
src/Bootstrap.js
Normal file
@ -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
|
@ -9,7 +9,7 @@ import {
|
|||||||
} from 'test-utils/mocks/mockSerializationService'
|
} from 'test-utils/mocks/mockSerializationService'
|
||||||
import { userSettingsStubFactory } from 'test-utils/stubs/userSettings'
|
import { userSettingsStubFactory } from 'test-utils/stubs/userSettings'
|
||||||
|
|
||||||
import { Bootstrap, BootstrapProps } from './Bootstrap'
|
import Bootstrap, { BootstrapProps } from './Bootstrap'
|
||||||
|
|
||||||
const mockPersistedStorage =
|
const mockPersistedStorage =
|
||||||
jest.createMockFromModule<jest.Mock<typeof localforage>>('localforage')
|
jest.createMockFromModule<jest.Mock<typeof localforage>>('localforage')
|
||||||
|
@ -76,7 +76,7 @@ const getConfigFromSdk = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Bootstrap = ({
|
const Bootstrap = ({
|
||||||
persistedStorage: persistedStorageProp = localforage.createInstance({
|
persistedStorage: persistedStorageProp = localforage.createInstance({
|
||||||
name: 'chitchatter',
|
name: 'chitchatter',
|
||||||
description: 'Persisted settings data for chitchatter',
|
description: 'Persisted settings data for chitchatter',
|
||||||
@ -264,3 +264,5 @@ export const Bootstrap = ({
|
|||||||
</Router>
|
</Router>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default Bootstrap
|
||||||
|
13
src/Init.tsx
13
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 Box from '@mui/material/Box'
|
||||||
import Typography from '@mui/material/Typography'
|
import Typography from '@mui/material/Typography'
|
||||||
import { v4 as uuid } from 'uuid'
|
import { v4 as uuid } from 'uuid'
|
||||||
@ -11,7 +11,10 @@ import {
|
|||||||
import { WholePageLoading } from 'components/Loading/Loading'
|
import { WholePageLoading } from 'components/Loading/Loading'
|
||||||
import { ColorMode, UserSettings } from 'models/settings'
|
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'> {
|
export interface InitProps extends Omit<BootstrapProps, 'initialUserSettings'> {
|
||||||
getUuid?: typeof uuid
|
getUuid?: typeof uuid
|
||||||
@ -74,7 +77,11 @@ const Init = ({ getUuid = uuid, ...props }: InitProps) => {
|
|||||||
return <WholePageLoading />
|
return <WholePageLoading />
|
||||||
}
|
}
|
||||||
|
|
||||||
return <Bootstrap {...props} initialUserSettings={userSettings} />
|
return (
|
||||||
|
<Suspense fallback={<WholePageLoading />}>
|
||||||
|
<Bootstrap {...props} initialUserSettings={userSettings} />
|
||||||
|
</Suspense>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Init
|
export default Init
|
||||||
|
@ -14,7 +14,11 @@ export const WholePageLoading = ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
height: '100vh',
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
},
|
},
|
||||||
...(Array.isArray(sx) ? sx : [sx]),
|
...(Array.isArray(sx) ? sx : [sx]),
|
||||||
]}
|
]}
|
||||||
|
Loading…
Reference in New Issue
Block a user