spinner while logging in
Massimo Melina committed
Dec 26, 2021 at 16:33 UTC
178a355f99355a694cd1c0b3ace7b32964fdb41e
4 files changed
+24
-2
frontend/src/api.ts
+3
-2
@@ -1,9 +1,10 @@
1
import { useEffect, useState } from 'react';
2
-import { Falsy } from './misc'
2
+import { Falsy, working } from './misc'
3
4
const PREFIX = '/~/api/'
5
6
export function apiCall(cmd: string, params?: object) : Promise<any> {
7
+ const stop = working()
8
return fetch(PREFIX+cmd, {
9
method: 'POST',
10
headers: { 'content-type': 'application/json' },
@@ -14,7 +15,7 @@ export function apiCall(cmd: string, params?: object) : Promise<any> {
15
const msg = 'Failed API ' + cmd
16
console.warn(msg + (params ? ' ' + JSON.stringify(params) : ''))
17
throw new ApiError(res.status, msg)
17
- })
18
+ }).finally(stop)
19
}
20
21
export class ApiError extends Error {
frontend/src/index.scss
+10
@@ -64,6 +64,10 @@ header {
64
from { transform: rotate(0deg); }
65
to { transform: rotate(360deg); }
66
}
67
+@keyframes fade-in {
68
+ 0% {opacity: 0}
69
+ 100% {opacity: 1}
70
+}
71
72
.spinner {
73
animation: 1s spin infinite;
@@ -148,6 +152,12 @@ ul.dir {
152
gap: 1em;
153
}
154
155
+.dialog.working {
156
+ background: none;
157
+ font-size: 5em;
158
+ animation: 1s spin infinite, 1s fade-in;
159
+}
160
+
161
@media (max-width: 50em) {
162
#menu-bar button:nth-child(1n+2) label { display: none } /* icons only */
163
.breadcrumb .icon {
frontend/src/misc.ts
+10
@@ -1,4 +1,6 @@
1
import { createElement as h } from 'react'
2
+import { Spinner } from './components'
3
+import { newDialog } from './dialog'
4
import { Icon } from './icons'
5
6
export type Falsy = false | null | undefined | '' | 0
@@ -55,3 +57,11 @@ export function waitFor<T>(cb:()=>T, ms:number=200) : Promise<Exclude<T,Falsy>>
57
}
58
})
59
}
60
+
61
+export function working() {
62
+ return newDialog({
63
+ closable: false,
64
+ content: Spinner,
65
+ className: 'working',
66
+ })
67
+}
package.json
+1
@@ -12,6 +12,7 @@
12
"scripts": {
13
"watch-server": "nodemon --ignore tests/ --watch src -e ts,tsx --exec ts-node src/index.ts vfs.yaml",
14
"start": "node dist",
15
+ "start-frontend": "cd frontend && npm run start",
16
"build": "node timestamp && tsc && cp package*.json *.yaml dist && cd dist && npm ci --production",
17
"build-all": "npm run build && cd frontend && npm run build && cd ..",
18
"test": "mocha -r ts-node/register 'tests/**/*.ts'"