diff options
Diffstat (limited to 'subprojects/frontend/src/editor/EditorPane.tsx')
-rw-r--r-- | subprojects/frontend/src/editor/EditorPane.tsx | 23 |
1 files changed, 20 insertions, 3 deletions
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx index 935a84e8..df43d2c9 100644 --- a/subprojects/frontend/src/editor/EditorPane.tsx +++ b/subprojects/frontend/src/editor/EditorPane.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import Box from '@mui/material/Box'; | 1 | import Box from '@mui/material/Box'; |
2 | import Skeleton from '@mui/material/Skeleton'; | ||
2 | import Stack from '@mui/material/Stack'; | 3 | import Stack from '@mui/material/Stack'; |
3 | import Toolbar from '@mui/material/Toolbar'; | 4 | import Toolbar from '@mui/material/Toolbar'; |
4 | import { observer } from 'mobx-react-lite'; | 5 | import { observer } from 'mobx-react-lite'; |
5 | import React from 'react'; | 6 | import React, { useState } from 'react'; |
6 | 7 | ||
7 | import Loading from '../Loading'; | ||
8 | import { useRootStore } from '../RootStore'; | 8 | import { useRootStore } from '../RootStore'; |
9 | 9 | ||
10 | import EditorArea from './EditorArea'; | 10 | import EditorArea from './EditorArea'; |
@@ -12,6 +12,23 @@ import EditorButtons from './EditorButtons'; | |||
12 | import GenerateButton from './GenerateButton'; | 12 | import GenerateButton from './GenerateButton'; |
13 | import SearchPanelPortal from './SearchPanelPortal'; | 13 | import SearchPanelPortal from './SearchPanelPortal'; |
14 | 14 | ||
15 | function EditorLoading(): JSX.Element { | ||
16 | const [skeletonSizes] = useState(() => | ||
17 | new Array(10).fill(0).map(() => Math.random() * 60 + 10), | ||
18 | ); | ||
19 | |||
20 | return ( | ||
21 | <Box mx={2}> | ||
22 | {skeletonSizes.map((length, i) => ( | ||
23 | /* eslint-disable-next-line react/no-array-index-key -- | ||
24 | Random placeholders have no identity. | ||
25 | */ | ||
26 | <Skeleton key={i} width={`${length}%`} /> | ||
27 | ))} | ||
28 | </Box> | ||
29 | ); | ||
30 | } | ||
31 | |||
15 | function EditorPane(): JSX.Element { | 32 | function EditorPane(): JSX.Element { |
16 | const { editorStore } = useRootStore(); | 33 | const { editorStore } = useRootStore(); |
17 | 34 | ||
@@ -23,7 +40,7 @@ function EditorPane(): JSX.Element { | |||
23 | </Toolbar> | 40 | </Toolbar> |
24 | <Box flexGrow={1} flexShrink={1} overflow="auto"> | 41 | <Box flexGrow={1} flexShrink={1} overflow="auto"> |
25 | {editorStore === undefined ? ( | 42 | {editorStore === undefined ? ( |
26 | <Loading /> | 43 | <EditorLoading /> |
27 | ) : ( | 44 | ) : ( |
28 | <> | 45 | <> |
29 | <SearchPanelPortal editorStore={editorStore} /> | 46 | <SearchPanelPortal editorStore={editorStore} /> |