feat: wait before displaying disconnected state

Author: Akryum

packages/app-frontend/src/features/App.vue

@@ -37,7 +37,7 @@ export default defineComponent({
   },
 
   setup() {
-    const { isConnected, isInitializing } = useAppConnection()
+    const { isConnected, isInitializing, showDisplayDisconnected } = useAppConnection()
 
     function updateTheme(theme: string) {
       if (theme === 'dark' || theme === 'high-contrast' || (theme === 'auto' && chromeTheme === 'dark')) {
@@ -80,6 +80,7 @@ export default defineComponent({
     return {
       isConnected,
       isInitializing,
+      showDisplayDisconnected,
       showAppsSelector,
       orientation,
       isChrome,
@@ -103,7 +104,7 @@ export default defineComponent({
     />
 
     <AppDisconnected
-      v-else-if="!isConnected"
+      v-else-if="showDisplayDisconnected"
       class="absolute inset-0"
     />
 

packages/app-frontend/src/features/connection/index.ts

@@ -1,16 +1,40 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useNow } from '@vueuse/core'
 
 const isConnected = ref(false)
 const isInitializing = ref(true)
+const lastDisconnect = ref(0)
 
 export function useAppConnection() {
+  const now = useNow({
+    interval: 1000,
+  })
+  const showDisplayDisconnected = computed(() => {
+    if (isInitializing.value) {
+      return false
+    }
+    if (lastDisconnect.value === 0) {
+      return false
+    }
+    // Wait for 5 seconds before showing the disconnected message
+    return !isConnected && now.value.getTime() - lastDisconnect.value > 5000
+  })
+
   return {
     isConnected,
     isInitializing,
+    lastDisconnect,
+    showDisplayDisconnected,
   }
 }
 
-export function setAppConnected(value: boolean) {
+export function setAppConnected(value: boolean, force = false) {
+  if (force) {
+    lastDisconnect.value = 0
+  }
+  else if (!value && isConnected.value) {
+    lastDisconnect.value = Date.now()
+  }
   isConnected.value = value
 }
 

packages/app-frontend/src/index.ts

@@ -19,7 +19,7 @@ export async function initDevTools(shell: Shell) {
   app.mount('#app')
   connectApp(app, shell)
   shell.onReload(() => {
-    setAppConnected(false)
+    setAppConnected(false, true)
     getBridge()?.removeAllListeners()
     connectApp(app, shell)
   })

packages/shell-chrome/src/devtools.js

@@ -36,7 +36,7 @@ initDevTools({
             setAppConnected(false)
 
             // Retry
-            retryConnectTimer = setTimeout(connect, 1000)
+            retryConnectTimer = setTimeout(connect, 500)
           })
 
           if (connectCount > 1) {
@@ -49,7 +49,7 @@ initDevTools({
           setAppConnected(false)
 
           // Retry
-          retryConnectTimer = setTimeout(connect, 5000)
+          retryConnectTimer = setTimeout(connect, 1000)
         }
       }
       connect()