fix: Show the network as down when no endpoints respond

packages/shared/components/ProgressBar.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    export let percent = ''
+    export let percent = 0
     export let classes = ''
     export let message = ''
 </script>
@@ -13,11 +13,15 @@
     .progress {
         transition: width 0.25s;
     }
+
+    .message {
+        z-index: 1;
+    }
 </style>
 
 <div class={`relative flex justify-center items-center border border-solid rounded-2xl border-gray-300 ${classes}`}>
     <span
         class="absolute left-0 inline-block bg-blue-200 progress rounded-2xl"
         style={`width:${Math.max(Math.min(percent, 100), 0)}%`} />
-    <span class="text-12 text-blue-500 z-10">{message}</span>
+    <span class="text-12 text-blue-500 message">{message}</span>
 </div>

packages/shared/lib/networkStatus.ts

@@ -52,6 +52,8 @@ export async function fetchNetworkStatus(): Promise<void> {
         },
     }
 
+    let updated = false
+
     for (let index = 0; index < NETWORK_STATUS_ENDPOINTS.length; index++) {
         const endpoint = NETWORK_STATUS_ENDPOINTS[index]
 
@@ -75,9 +77,22 @@ export async function fetchNetworkStatus(): Promise<void> {
 
             networkStatus.set(statusData)
 
+            updated = true
+
             break
         } catch (err) {
             console.error(err.name === "AbortError" ? new Error(`Could not fetch from ${endpoint}.`) : err)
         }
     }
+
+    if (!updated) {
+        networkStatus.set({
+            itemsPerSecond: 0,
+            confirmedItemsPerSecond: 0,
+            confirmationRate: 0,
+            latestMilestoneIndex: 0,
+            latestMilestoneIndexTime: 0,
+            health: 0
+        })
+    }
 }