file show: spinner while loading
Massimo Melina committed
Jun 27, 2023 at 18:13 UTC
cb313bdd8616dff11ef4879409df375d23a7348f
1 file changed
+9
-2
frontend/src/show.ts
+9
-2
@@ -3,7 +3,7 @@ import { createElement as h, Fragment, useRef, useState } from 'react'
3
import { hfsEvent, hIcon, newDialog, restartAnimation, WIKI_URL } from './misc'
4
import { useEventListener, useWindowSize } from 'usehooks-ts'
5
import { EntryDetails, useMidnight } from './BrowseFiles'
6
-import { Flex, FlexV, iconBtn } from './components'
6
+import { Flex, FlexV, iconBtn, Spinner } from './components'
7
import { openFileMenu } from './fileMenu'
8
import { useI18N } from './i18n'
9
@@ -32,6 +32,7 @@ export function fileShow(entry: DirEntry) {
32
return
33
}
34
})
35
+ const [loading, setLoading] = useState(false)
36
const [failed, setFailed] = useState<false | string>(false)
37
const {t} = useI18N()
38
return h(Fragment, {},
@@ -48,6 +49,7 @@ export function fileShow(entry: DirEntry) {
49
h(FlexV, { flex: 1, center: true, position: 'relative', maxHeight: '100%',
50
overflow: 'hidden' // without this <video> can make me go beyond the screen limit
51
},
52
+ loading && h(Spinner, { style: { position: 'absolute', fontSize: '20vh', opacity: .5 } }),
53
failed === cur.n ? h(FlexV, { alignItems: 'center', textAlign: 'center' },
54
hIcon('error', { style: { fontSize: '20vh' } }),
55
h('div', {}, cur.name),
@@ -55,7 +57,10 @@ export function fileShow(entry: DirEntry) {
57
) : h(getShowType(cur) || Fragment, {
58
src: cur.uri,
59
className: 'showing',
58
- onLoad: () => lastGood.current = cur,
60
+ onLoad: () => {
61
+ lastGood.current = cur
62
+ setLoading(false)
63
+ },
64
onError: () => {
65
go()
66
setFailed(cur.n)
@@ -72,9 +77,11 @@ export function fileShow(entry: DirEntry) {
77
moving.current = dir
78
let e = cur
79
setFailed(false)
80
+ setLoading(true)
81
while (1) {
82
e = e.getSibling(moving.current)
83
if (!e) { // reached last
84
+ setLoading(cur !== lastGood.current)
85
setCur(lastGood.current) // revert to last known supported file
86
return restartAnimation(document.body, '.2s blink')
87
}