From a81721d5525394f30907efd05676825a62577140 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 16 Oct 2023 00:29:03 +0800
Subject: [PATCH] feat: bring back disconnected dialog

---
 .../client/components/DisconnectIndicator.vue    | 16 +++++++++-------
 packages/devtools/client/composables/rpc.ts      | 11 ++++++++---
 .../devtools/src/runtime/plugins/view/client.ts  |  2 +-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
index a182fb991..19ca710f3 100644
--- a/packages/devtools/client/components/DisconnectIndicator.vue
+++ b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -1,19 +1,21 @@
 <template>
   <Teleport to="body">
     <div
-      v-if="wsConnectingDebounced" flex="~ col justify-center items-center gap-2"
+      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
     >
-      <div flex="~" mt--10 items-center justify-center>
-        <NuxtLogo h-14 />
+      <div flex="~" items-center justify-center>
+        <NuxtLogo h-8 />
       </div>
-      <div v-if="wsError" flex="~ gap-2" items-center text-rose>
+      <div border="t base" my2 h-1px w-10 />
+      <div flex="~ gap-2" items-center text-xl op50>
         <NIcon icon="i-carbon-wifi-off" />
-        WebSocket disconnected
+        Disconnected from Server
       </div>
-      <div v-else flex="~ gap-2" animate-pulse items-center text-yellow>
+      <div flex="~ gap-2" animate-pulse items-center text-xl text-orange>
         <NIcon icon="i-carbon-circle-dash" animate-spin />
-        Connecting to the server...
+        Retrying...
       </div>
     </div>
   </Teleport>
diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
index 661f431ab..6eec34ced 100644
--- a/packages/devtools/client/composables/rpc.ts
+++ b/packages/devtools/client/composables/rpc.ts
@@ -60,9 +60,14 @@ async function connectVite() {
     onMessage(data)
   })
 
-  // TODO:
-  // hot.on('vite:connect', (data) => {})
-  // hot.on('vite:disconnect', (data) => {})
+  wsConnecting.value = true
+
+  hot.on('vite:ws:connect', () => {
+    wsConnecting.value = false
+  })
+  hot.on('vite:ws:disconnect', () => {
+    wsConnecting.value = true
+  })
 
   return hot
 }
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
index d70557fb3..30b39ca34 100644
--- a/packages/devtools/src/runtime/plugins/view/client.ts
+++ b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -148,7 +148,7 @@ export async function setupDevToolsClient({
     return iframe
   }
 
-  function waitForClientInjection(retry = 10, timeout = 200) {
+  function waitForClientInjection(retry = 20, timeout = 300) {
     let lastError: any
     const test = () => {
       try {