diff options
Diffstat (limited to 'subprojects/frontend/src/App.tsx')
-rw-r--r-- | subprojects/frontend/src/App.tsx | 31 |
1 files changed, 29 insertions, 2 deletions
diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx index b162e551..cd394345 100644 --- a/subprojects/frontend/src/App.tsx +++ b/subprojects/frontend/src/App.tsx | |||
@@ -1,6 +1,14 @@ | |||
1 | import Box from '@mui/material/Box'; | 1 | import Box from '@mui/material/Box'; |
2 | import CssBaseline from '@mui/material/CssBaseline'; | 2 | import CssBaseline from '@mui/material/CssBaseline'; |
3 | import { StrictMode, Suspense, lazy } from 'react'; | 3 | import { throttle } from 'lodash-es'; |
4 | import { | ||
5 | StrictMode, | ||
6 | Suspense, | ||
7 | lazy, | ||
8 | useState, | ||
9 | useEffect, | ||
10 | useMemo, | ||
11 | } from 'react'; | ||
4 | 12 | ||
5 | import Loading from './Loading'; | 13 | import Loading from './Loading'; |
6 | import type RootStore from './RootStore'; | 14 | import type RootStore from './RootStore'; |
@@ -10,18 +18,37 @@ import ThemeProvider from './theme/ThemeProvider'; | |||
10 | 18 | ||
11 | const Refinery = lazy(() => import('./Refinery.js')); | 19 | const Refinery = lazy(() => import('./Refinery.js')); |
12 | 20 | ||
21 | function useInnerHeight(): number { | ||
22 | const [innerHeight, setInnerHeight] = useState(window.innerHeight); | ||
23 | const resizeHandler = useMemo( | ||
24 | () => throttle(() => setInnerHeight(window.innerHeight), 250), | ||
25 | [], | ||
26 | ); | ||
27 | useEffect(() => { | ||
28 | window.addEventListener('resize', resizeHandler, { passive: true }); | ||
29 | return () => { | ||
30 | window.removeEventListener('resize', resizeHandler); | ||
31 | resizeHandler.cancel(); | ||
32 | }; | ||
33 | }, [resizeHandler]); | ||
34 | return innerHeight; | ||
35 | } | ||
36 | |||
13 | export default function App({ | 37 | export default function App({ |
14 | rootStore, | 38 | rootStore, |
15 | }: { | 39 | }: { |
16 | rootStore: RootStore; | 40 | rootStore: RootStore; |
17 | }): JSX.Element { | 41 | }): JSX.Element { |
42 | // See https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ | ||
43 | const innerHeight = useInnerHeight(); | ||
44 | |||
18 | return ( | 45 | return ( |
19 | <StrictMode> | 46 | <StrictMode> |
20 | <RootStoreProvider rootStore={rootStore}> | 47 | <RootStoreProvider rootStore={rootStore}> |
21 | <ThemeProvider> | 48 | <ThemeProvider> |
22 | <CssBaseline enableColorScheme /> | 49 | <CssBaseline enableColorScheme /> |
23 | <WindowControlsOverlayColor /> | 50 | <WindowControlsOverlayColor /> |
24 | <Box height="100vh" overflow="auto"> | 51 | <Box height={`${innerHeight}px`} overflow="hidden"> |
25 | <Suspense fallback={<Loading />}> | 52 | <Suspense fallback={<Loading />}> |
26 | <Refinery /> | 53 | <Refinery /> |
27 | </Suspense> | 54 | </Suspense> |