From ef4f1e3a0b64fd25d82084158ad3515b3f3af90d Mon Sep 17 00:00:00 2001
From: Sonia Appasamy <sonia@tailscale.com>
Date: Thu, 7 Dec 2023 11:17:53 -0500
Subject: [PATCH] client/web: add loading state to app

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

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
---
 client/web/src/components/app.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index 26c17aae3..58769913b 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -16,6 +16,7 @@ import useNodeData, {
   featureDescription,
   NodeData,
 } from "src/hooks/node-data"
+import LoadingDots from "src/ui/loading-dots"
 import { Link, Route, Router, Switch, useLocation } from "wouter"
 
 export default function App() {
@@ -24,7 +25,7 @@ export default function App() {
   return (
     <main className="min-w-sm max-w-lg mx-auto py-4 sm:py-14 px-5">
       {loadingAuth || !auth ? (
-        <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
+        <LoadingView />
       ) : (
         <WebClient auth={auth} newSession={newSession} />
       )}
@@ -45,7 +46,7 @@ function WebClient({
   }, [auth, refreshData])
 
   return !data ? (
-    <div className="text-center py-14">Loading...</div>
+    <LoadingView />
   ) : data.Status === "NeedsLogin" ||
     data.Status === "NoState" ||
     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" />
+  )
+}