From 7dcec6a2f889734a1e17598e34878c985dda1ec2 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 6 Apr 2026 14:51:33 +0200
Subject: [PATCH 1/4] fix(devtools/client): show NLoading indicator instead of
 DisconnectIndicator on initial load

---
 packages/devtools/client/app.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 07fee6dda2..0d42da5482 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from '#app/composables/router'
 import { useHead } from '#imports'
-import { useEventListener, useEyeDropper } from '@vueuse/core'
+import { useEventListener, useEyeDropper, watchOnce } from '@vueuse/core'
 import { computed, onMounted, watch, watchEffect } from 'vue'
 import { getColorMode, showConnectionWarning, useClient, useInjectionClient } from '~/composables/client'
 import { devAuthToken, isDevAuthed } from '~/composables/dev-auth'
@@ -18,6 +18,7 @@ import '@vue/devtools-applet/style.css'
 import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import './styles/global.css'
+import DisconnectIndicator from './components/DisconnectIndicator.vue'
 
 if (import.meta.client)
   import('./setup/unocss-runtime')
@@ -44,7 +45,15 @@ const client = useClient()
 const route = useRoute()
 const colorMode = getColorMode()
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
-const waiting = computed(() => !client.value && !showConnectionWarning.value)
+const waiting = computed(() => !client.value && !showConnectionWarning.value && !wsConnecting.value)
+
+const wsConnectedOnce = ref(false)
+if (wsConnecting.value) {
+  watchOnce(wsConnecting, (val) => {
+    if (val === false)
+      wsConnectedOnce.value = true
+  })
+}
 
 watch(
   () => client.value?.app.colorMode.value,
@@ -131,7 +140,7 @@ registerCommands(() => [
   <div fixed inset-0 h-screen w-screen font-sans>
     <NuxtLoadingIndicator />
     <NNotification />
-    <NLoading v-if="waiting">
+    <NLoading v-if="waiting && !wsConnectedOnce">
       Connecting....
     </NLoading>
     <div
@@ -152,8 +161,8 @@ registerCommands(() => [
       </NuxtLayout>
       <CommandPalette />
       <AuthConfirmDialog />
-    </div>
-    <DisconnectIndicator />
+    </div> 
+    <DisconnectIndicator v-if="wsConnectedOnce" />
     <RestartDialogs />
     <div v-lazy-show="dataSchema">
       <LazyDataSchemaDrawer />

From c64a975ffb26fd80ff93f47fb675b56764c9fbda Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 6 Apr 2026 14:52:11 +0200
Subject: [PATCH 2/4] lint

---
 packages/devtools/client/app.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 0d42da5482..d1df3f4906 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -18,7 +18,6 @@ import '@vue/devtools-applet/style.css'
 import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import './styles/global.css'
-import DisconnectIndicator from './components/DisconnectIndicator.vue'
 
 if (import.meta.client)
   import('./setup/unocss-runtime')

From 9e55a814d52a13309f4d2f51dc68976ae8e103db Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 6 Apr 2026 23:36:08 +0200
Subject: [PATCH 3/4] refactor: use a debounce

---
 packages/devtools/client/app.vue            | 30 ++++++++++++++-------
 packages/devtools/client/composables/rpc.ts |  5 +++-
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index d1df3f4906..5a805e4620 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -44,16 +44,28 @@ const client = useClient()
 const route = useRoute()
 const colorMode = getColorMode()
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
-const waiting = computed(() => !client.value && !showConnectionWarning.value && !wsConnecting.value)
+const waiting = computed(() => !client.value && !showConnectionWarning.value)
+const showDisconnectIndicator = ref(false)
 
-const wsConnectedOnce = ref(false)
-if (wsConnecting.value) {
-  watchOnce(wsConnecting, (val) => {
-    if (val === false)
-      wsConnectedOnce.value = true
+if (wsConnectedOnce.value) {
+  // debounce one time to avoid showing the indicator on first load of the app
+ onConnected()
+} else {
+  // watch for connection and show the indicator if it was connected at least once
+  const stop = watch(wsConnectedOnce, (val) => {
+    if (val) {
+      onConnected()
+      stop()
+    }
   })
 }
 
+function onConnected() {
+  setTimeout(() => {
+    showDisconnectIndicator.value = true
+  }, WS_DEBOUNCE_TIME)
+}
+
 watch(
   () => client.value?.app.colorMode.value,
   (mode) => {
@@ -139,7 +151,7 @@ registerCommands(() => [
   <div fixed inset-0 h-screen w-screen font-sans>
     <NuxtLoadingIndicator />
     <NNotification />
-    <NLoading v-if="waiting && !wsConnectedOnce">
+    <NLoading v-if="waiting">
       Connecting....
     </NLoading>
     <div
@@ -160,8 +172,8 @@ registerCommands(() => [
       </NuxtLayout>
       <CommandPalette />
       <AuthConfirmDialog />
-    </div> 
-    <DisconnectIndicator v-if="wsConnectedOnce" />
+    </div>
+    <DisconnectIndicator v-if="showDisconnectIndicator" />
     <RestartDialogs />
     <div v-lazy-show="dataSchema">
       <LazyDataSchemaDrawer />
diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
index 007e2dc73d..75784617d3 100644
--- a/packages/devtools/client/composables/rpc.ts
+++ b/packages/devtools/client/composables/rpc.ts
@@ -4,9 +4,11 @@ import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { useDebounce } from '@vueuse/core'
 import { ref, shallowRef } from 'vue'
 
+export const WS_DEBOUNCE_TIME = 2000
+export const wsConnectedOnce = ref(false)
 export const wsConnecting = ref(true)
 export const wsError = shallowRef<any>()
-export const wsConnectingDebounced = useDebounce(wsConnecting, 2000)
+export const wsConnectingDebounced = useDebounce(wsConnecting, WS_DEBOUNCE_TIME)
 
 export const clientFunctions = {
   // will be added in setup/client-rpc.ts
@@ -71,6 +73,7 @@ async function connectDevToolsRpc(): Promise<DevToolsRpcClient> {
     // eslint-disable-next-line no-console
     console.log('[nuxt-devtools] Connected to Vite DevTools RPC')
     wsConnecting.value = false
+    wsConnectedOnce.value = true
 
     return client
   }

From a22bf30b699f51be44aa8a55c9d75cc47ab5b487 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.h.dev@gmail.com>
Date: Mon, 6 Apr 2026 23:44:03 +0200
Subject: [PATCH 4/4] chore: lint

---
 packages/devtools/client/app.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 5a805e4620..25ae3b03f5 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useRoute } from '#app/composables/router'
 import { useHead } from '#imports'
-import { useEventListener, useEyeDropper, watchOnce } from '@vueuse/core'
+import { useEventListener, useEyeDropper } from '@vueuse/core'
 import { computed, onMounted, watch, watchEffect } from 'vue'
 import { getColorMode, showConnectionWarning, useClient, useInjectionClient } from '~/composables/client'
 import { devAuthToken, isDevAuthed } from '~/composables/dev-auth'
 import { useCopy } from '~/composables/editor'
-import { rpc } from '~/composables/rpc'
+import { rpc, WS_DEBOUNCE_TIME } from '~/composables/rpc'
 import { registerCommands } from '~/composables/state-commands'
 import { splitScreenAvailable, splitScreenEnabled } from '~/composables/storage'
 import { useSchemaInput } from './composables/state-schema'
@@ -49,8 +49,9 @@ const showDisconnectIndicator = ref(false)
 
 if (wsConnectedOnce.value) {
   // debounce one time to avoid showing the indicator on first load of the app
- onConnected()
-} else {
+  onConnected()
+}
+else {
   // watch for connection and show the indicator if it was connected at least once
   const stop = watch(wsConnectedOnce, (val) => {
     if (val) {