| 3 | import { Spinner } from "./spinner" |
| 4 | |
| 5 | export function StartupLoading(props: { ready: () => boolean }) { |
| 6 | const theme = useTheme().theme |
| 7 | const [show, setShow] = createSignal(false) |
| 8 | const text = createMemo(() => (props.ready() ? "Finishing startup..." : "Loading plugins...")) |
| 9 | let wait: NodeJS.Timeout | undefined |
| 10 | let hold: NodeJS.Timeout | undefined |
| 11 | let stamp = 0 |
| 12 | |
| 13 | createEffect(() => { |
| 14 | if (props.ready()) { |
| 15 | if (wait) { |
| 16 | clearTimeout(wait) |
| 17 | wait = undefined |
| 18 | } |
| 19 | if (!show()) return |
| 20 | if (hold) return |
| 21 | |
| 22 | const left = 3000 - (Date.now() - stamp) |
| 23 | if (left <= 0) { |
| 24 | setShow(false) |
| 25 | return |
| 26 | } |
| 27 | |
| 28 | hold = setTimeout(() => { |
| 29 | hold = undefined |
| 30 | setShow(false) |
| 31 | }, left).unref() |
| 32 | return |
| 33 | } |
| 34 | |
| 35 | if (hold) { |
| 36 | clearTimeout(hold) |
| 37 | hold = undefined |
| 38 | } |
| 39 | if (show()) return |
| 40 | if (wait) return |
| 41 | |
| 42 | wait = setTimeout(() => { |
| 43 | wait = undefined |
| 44 | stamp = Date.now() |
| 45 | setShow(true) |
| 46 | }, 500).unref() |
| 47 | }) |
| 48 | |
| 49 | onCleanup(() => { |
| 50 | if (wait) clearTimeout(wait) |
| 51 | if (hold) clearTimeout(hold) |
| 52 | }) |
| 53 | |
| 54 | return ( |
| 55 | <Show when={show()}> |
| 56 | <box position="absolute" zIndex={5000} left={0} right={0} bottom={1} justifyContent="center" alignItems="center"> |
| 57 | <box backgroundColor={theme.backgroundPanel} paddingLeft={1} paddingRight={1}> |
| 58 | <Spinner color={theme.textMuted}>{text()}</Spinner> |
| 59 | </box> |
| 60 | </box> |
| 61 | </Show> |
| 62 | ) |