fix: reload only on page navigation event

Author: Akryum

Diff for: packages/app-frontend/src/features/App.vue

@@ -37,7 +37,7 @@ export default defineComponent({
   },
 
   setup() {
-    const { isConnected, isInitializing, showDisplayDisconnected, connectedTimes } = useAppConnection()
+    const { isConnected, isInitializing, showDisplayDisconnected, reloadTimes } = useAppConnection()
 
     function updateTheme(theme: string) {
       if (theme === 'dark' || theme === 'high-contrast' || (theme === 'auto' && chromeTheme === 'dark')) {
@@ -81,7 +81,7 @@ export default defineComponent({
       isConnected,
       isInitializing,
       showDisplayDisconnected,
-      connectedTimes,
+      reloadTimes,
       showAppsSelector,
       orientation,
       isChrome,
@@ -110,7 +110,7 @@ export default defineComponent({
 
     <div
       v-else
-      :key="connectedTimes"
+      :key="reloadTimes"
       class="w-full h-full flex"
       :class="{
         'flex-col': orientation === 'portrait',

Diff for: packages/app-frontend/src/features/connection/index.ts

@@ -4,7 +4,8 @@ import { useNow } from '@vueuse/core'
 const isConnected = ref(false)
 const isInitializing = ref(true)
 const lastDisconnect = ref(0)
-const connectedTimes = ref(0)
+const reloadTimes = ref(0)
+let reloadRegistered = false
 
 export function useAppConnection() {
   const now = useNow({
@@ -26,20 +27,27 @@ export function useAppConnection() {
     isInitializing,
     lastDisconnect,
     showDisplayDisconnected,
-    connectedTimes,
+    reloadTimes,
   }
 }
 
-export function setAppConnected(value: boolean, force = false) {
+export function setAppConnected(value: boolean, force = false, fromReload = false) {
+  // We got disconnected from a page reload
+  if (!value) {
+    reloadRegistered = fromReload
+  }
+
   if (force) {
     lastDisconnect.value = 0
   }
   else if (!value && isConnected.value) {
     lastDisconnect.value = Date.now()
   }
   isConnected.value = value
-  if (value) {
-    connectedTimes.value++
+
+  // We are reconnected after a page reload
+  if (value && reloadRegistered) {
+    reloadTimes.value++
   }
 }
 

Diff for: 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, true)
+    setAppConnected(false, true, true)
     getBridge()?.removeAllListeners()
     connectApp(app, shell)
   })