fix: debounce disconnect indicator

nuxt · May 17, 2023 · 895e6e3 · 895e6e3
1 parent bd263ee
commit 895e6e3
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <div
-      v-if="wsError || wsConnecting"
+      v-if="wsConnectingDebounced"
       flex="~ col justify-center items-center gap-2"
       fixed bottom-0 left-0 right-0 top-0 z-2147483646 p5 text-lg backdrop-blur-5 glass-effect
     >

diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
@@ -4,8 +4,9 @@ import type { ClientFunctions, ServerFunctions } from '../../src/types'
 
 const RECONNECT_INTERVAL = 2000
 
-export const wsConnecting = ref(true)
+export const wsConnecting = ref(false)
 export const wsError = ref<any>()
+export const wsConnectingDebounced = useDebounce(wsConnecting, 2000)
 
 let connectPromise = connectWS()
 let onMessage: Function = () => {}