fix: frontend: could hang on initial spinner
Massimo Melina committed
Mar 31, 2023 at 18:08 UTC
7b5113e832c66df73dceffff1cbd8febd0f4f78d
2 files changed
+10
-8
frontend/src/App.ts
+8
-6
@@ -1,21 +1,18 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { BrowserRouter, Route, Routes } from "react-router-dom"
4
-import { createElement as h, useState } from 'react'
4
+import { createElement as h } from 'react'
5
import { BrowseFiles } from "./BrowseFiles"
6
import { Dialogs } from './dialog'
7
import useTheme from "./useTheme"
8
import { useSnapState } from './state'
9
import { I18Nprovider } from './i18n'
10
-import { useEventListener } from 'usehooks-ts'
10
+import { proxy, useSnapshot } from "valtio"
11
import { Spinner } from "./components"
12
13
function App() {
14
useTheme()
15
- // wait for all plugins to be loaded
16
- const [ready, setReady] = useState(document.readyState === 'complete')
17
- useEventListener('load', () => setReady(true))
18
-
15
+ const { ready } = useSnapshot(pageState) // wait for all plugins to be loaded
16
const { messageOnly } = useSnapState()
17
if (messageOnly)
18
return h('h1', { style: { textAlign: 'center'} }, messageOnly)
@@ -32,3 +29,8 @@ function App() {
29
}
30
31
export default App;
32
+
33
+const pageState = proxy({ ready: document.readyState === 'complete' })
34
+document.addEventListener('readystatechange', () => {
35
+ pageState.ready = document.readyState === 'complete'
36
+})
frontend/src/components.ts
+2
-2
@@ -3,8 +3,8 @@
3
import { hfsEvent, hIcon } from './misc'
4
import { createElement as h, Fragment, HTMLAttributes, isValidElement, ReactNode, useMemo } from 'react'
5
6
-export function Spinner() {
7
- return hIcon('spinner', { className:'spinner' })
6
+export function Spinner(props: any) {
7
+ return hIcon('spinner', { className:'spinner', ...props })
8
}
9
10
export function Flex({ gap='.8em', vert=false, children=null, props={}, ...rest }) {