From 8654684c20eb6bd11261d0e7acc207604de875b8 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 16 Oct 2023 00:42:21 +0800
Subject: [PATCH] feat: improve disconnect indicator

---
 .../client/components/DisconnectIndicator.vue | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
index 19ca710f3..00e216b77 100644
--- a/packages/devtools/client/components/DisconnectIndicator.vue
+++ b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -1,22 +1,33 @@
+<script setup lang="ts">
+function reload() {
+  window.location.reload()
+}
+</script>
+
 <template>
   <Teleport to="body">
     <div
       v-if="wsConnectingDebounced"
       flex="~ col justify-center items-center gap-4"
-      fixed bottom-0 left-0 right-0 top-0 z-2147483646 p5 text-lg backdrop-blur-5 n-glass-effect
+      fixed bottom-0 left-0 right-0 top-0 z-2147483646 p5 text-lg backdrop-blur-4 n-glass-effect
     >
-      <div flex="~" items-center justify-center>
+      <div flex-auto />
+      <div flex="~" mt-8 items-center justify-center>
         <NuxtLogo h-8 />
       </div>
-      <div border="t base" my2 h-1px w-10 />
-      <div flex="~ gap-2" items-center text-xl op50>
+      <div flex="~ gap-2" items-center op50>
         <NIcon icon="i-carbon-wifi-off" />
         Disconnected from Server
       </div>
-      <div flex="~ gap-2" animate-pulse items-center text-xl text-orange>
+      <div border="t base" my2 h-1px w-10 />
+      <div flex="~ gap-2" animate-pulse items-center text-xl text-yellow>
         <NIcon icon="i-carbon-circle-dash" animate-spin />
         Retrying...
       </div>
+      <div flex-auto />
+      <NButton n="sm yellow" px2 py0 op40 @click="reload()">
+        Reload DevTools Page
+      </NButton>
     </div>
   </Teleport>
 </template>