feat: bring back disconnected dialog

Author: antfu

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>

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
 }

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 {