From 840a0934b8d6db88bc74f9489fab05f7cd174501 Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Wed, 10 Mar 2021 11:47:52 +0100
Subject: [PATCH 1/2] fix: Show the network as down when no endpoints respond

---
 packages/shared/lib/networkStatus.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/shared/lib/networkStatus.ts b/packages/shared/lib/networkStatus.ts
index 15d61ad28ad..eb0900b4e0d 100644
--- a/packages/shared/lib/networkStatus.ts
+++ b/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
+        })
+    }
 }

From d6a92244cb95283ae7f876f4b919c93249707116 Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Wed, 10 Mar 2021 12:27:17 +0100
Subject: [PATCH 2/2] fix: Network indicator progress bar z-index clash

---
 packages/shared/components/ProgressBar.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/shared/components/ProgressBar.svelte b/packages/shared/components/ProgressBar.svelte
index 9ea005d0369..7885ae68f7f 100644
--- a/packages/shared/components/ProgressBar.svelte
+++ b/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>