Do not show orange status when it is just loading

Radiokot · Nov 28, 2023 · a8d75d6 · a8d75d6
1 parent 7e74fec
commit a8d75d6
Showing 1 changed file with 31 additions and 24 deletions.
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
@@ -1,38 +1,45 @@
 <script>
     import tunnelStatus from "../stores/tunnel-status";
 
-    $: tunnelStatusString = $tunnelStatus
-        ? $tunnelStatus.isUnreachable()
-            ? "Unreacahable"
-            : $tunnelStatus.isOk()
-              ? "Running"
-              : $tunnelStatus.status
-        : "Loading…";
+    $: isTunnelStatusLoading = $tunnelStatus == null;
+    $: tunnelStatusString = isTunnelStatusLoading
+        ? "Loading…"
+        : $tunnelStatus?.isUnreachable()
+          ? "Unreacahable"
+          : $tunnelStatus?.isOk()
+            ? "Running"
+            : $tunnelStatus?.status;
     $: isTunnelHealthy = $tunnelStatus?.isOk() == true;
 </script>
 
 <div class="d-flex">
     <img class="logo me-3" src="/logo.svg" alt="Logo" />
     <div>
         <span>
-            <svg
-                width="8"
-                height="8"
-                viewBox="0 0 8 8"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <circle
-                    class={isTunnelHealthy ? "status-ok" : "status-warning"}
-                    cx="4"
-                    cy="4"
-                    r="4"
-                    fill="#000000"
-                />
-            </svg>
-            <small class={isTunnelHealthy ? "status-ok" : "status-warning"}
-                >{tunnelStatusString}</small
+            {#if !isTunnelStatusLoading}
+                <svg
+                    width="8"
+                    height="8"
+                    viewBox="0 0 8 8"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <circle
+                        class:status-ok={isTunnelHealthy}
+                        class:status-warning={!isTunnelHealthy}
+                        cx="4"
+                        cy="4"
+                        r="4"
+                        fill="#000000"
+                    />
+                </svg>
+            {/if}
+            <small
+                class:status-ok={!isTunnelStatusLoading && isTunnelHealthy}
+                class:status-warning={!isTunnelStatusLoading && !isTunnelHealthy}
             >
+                {tunnelStatusString}
+            </small>
         </span>
         <h3>Cloudflare Tunnel</h3>
         <span id="connector-version">2023.10.0</span>