From f6b006231fdba08c942bf158292c9b7f49298979 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Tue, 4 Jun 2024 11:50:54 +0200
Subject: [PATCH] fix: reload only on page navigation event

---
 packages/app-frontend/src/features/App.vue     |  6 +++---
 .../src/features/connection/index.ts           | 18 +++++++++++++-----
 packages/app-frontend/src/index.ts             |  2 +-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
index aa4f10c25..f091b9bf1 100644
--- a/packages/app-frontend/src/features/App.vue
+++ b/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 --git a/packages/app-frontend/src/features/connection/index.ts b/packages/app-frontend/src/features/connection/index.ts
index 73d141c84..a60e2cb9c 100644
--- a/packages/app-frontend/src/features/connection/index.ts
+++ b/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,11 +27,16 @@ 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
   }
@@ -38,8 +44,10 @@ export function setAppConnected(value: boolean, force = false) {
     lastDisconnect.value = Date.now()
   }
   isConnected.value = value
-  if (value) {
-    connectedTimes.value++
+
+  // We are reconnected after a page reload
+  if (value && reloadRegistered) {
+    reloadTimes.value++
   }
 }
 
diff --git a/packages/app-frontend/src/index.ts b/packages/app-frontend/src/index.ts
index 1007e0d62..13f01e9c1 100644
--- a/packages/app-frontend/src/index.ts
+++ b/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)
   })