TheArchive/tailscale
1
0
Fork 0
mirror of https://github.com/tailscale/tailscale.git synced 2025-01-07 16:17:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

client/web: add loading state to app

Browse Source 
Displays animated loading dots while initial auth and data endpoints
are fetching.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
This commit is contained in:
Sonia Appasamy 2023-12-07 11:17:53 -05:00 committed by Sonia Appasamy
parent 3f576fc4ca
commit ef4f1e3a0b
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/web/src/components/app.tsx
View File

@ -16,6 +16,7 @@ import useNodeData, {
featureDescription, featureDescription,
NodeData, NodeData,
} from "src/hooks/node-data" } from "src/hooks/node-data"
import LoadingDots from "src/ui/loading-dots"
import { Link, Route, Router, Switch, useLocation } from "wouter" import { Link, Route, Router, Switch, useLocation } from "wouter"
export default function App() { export default function App() {
@ -24,7 +25,7 @@ export default function App() {
return ( return (
<main className="min-w-sm max-w-lg mx-auto py-4 sm:py-14 px-5"> <main className="min-w-sm max-w-lg mx-auto py-4 sm:py-14 px-5">
{loadingAuth || !auth ? ( {loadingAuth || !auth ? (
<div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view <LoadingView />
) : ( ) : (
<WebClient auth={auth} newSession={newSession} /> <WebClient auth={auth} newSession={newSession} />
)} )}
@ -45,7 +46,7 @@ function WebClient({
}, [auth, refreshData]) }, [auth, refreshData])
return !data ? ( return !data ? (
<div className="text-center py-14">Loading...</div> <LoadingView />
) : data.Status === "NeedsLogin" || ) : data.Status === "NeedsLogin" ||
data.Status === "NoState" || data.Status === "NoState" ||
data.Status === "Stopped" ? ( data.Status === "Stopped" ? (
@ -157,3 +158,13 @@ function Header({
</> </>
) )
} }
/**
* LoadingView fills its container with small animated loading dots
* in the center.
*/
export function LoadingView() {
return (
<LoadingDots className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
)
}