fix(devtools/client): debounce render of NDisconnectIndicator (#979)

Author: huang-julien

packages/devtools/client/app.vue

@@ -6,7 +6,7 @@ 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'
@@ -45,6 +45,27 @@ const route = useRoute()
 const colorMode = getColorMode()
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
 const waiting = computed(() => !client.value && !showConnectionWarning.value)
+const showDisconnectIndicator = ref(false)
+
+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,
@@ -153,7 +174,7 @@ registerCommands(() => [
       <CommandPalette />
       <AuthConfirmDialog />
     </div>
-    <DisconnectIndicator />
+    <DisconnectIndicator v-if="showDisconnectIndicator" />
     <RestartDialogs />
     <div v-lazy-show="dataSchema">
       <LazyDataSchemaDrawer />

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
   }