feat: improve disconnect indicator

nuxt · Oct 15, 2023 · 8654684 · 8654684
1 parent 2ea18f3
commit 8654684
Showing 1 changed file with 16 additions and 5 deletions.
diff --git 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>