Handle setTimeout called when tab is shown (#6257)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/layouts/home-assistant.ts

@@ -76,11 +76,15 @@ export class HomeAssistantAppEl extends HassElement {
     // @ts-ignore
     this._loadHassTranslations(this.hass!.language, "state");
 
+    this.addEventListener("unsuspend-app", () => this._onVisible(), false);
+
     document.addEventListener(
       "visibilitychange",
-      () => this._handleVisibilityChange(),
+      () => this._checkVisibility(),
       false
     );
+    document.addEventListener("freeze", () => this._suspendApp());
+    document.addEventListener("resume", () => this._checkVisibility());
   }
 
   protected hassReconnected() {
@@ -148,9 +152,19 @@ export class HomeAssistantAppEl extends HassElement {
         : route.path.substr(1, dividerPos - 1);
   }
 
-  protected _handleVisibilityChange() {
+  protected _checkVisibility() {
     if (document.hidden) {
       // If the document is hidden, we will prevent reconnects until we are visible again
+      this._onHidden();
+    } else {
+      this._onVisible();
+    }
+  }
+
+  private _onHidden() {
+    if (this._visiblePromiseResolve) {
+      return;
+    }
     this.hass!.connection.suspendReconnectUntil(
       new Promise((resolve) => {
         this._visiblePromiseResolve = resolve;
@@ -159,9 +173,23 @@ export class HomeAssistantAppEl extends HassElement {
     // We close the connection to Home Assistant after being hidden for 5 minutes
     this._hiddenTimeout = window.setTimeout(() => {
       this._hiddenTimeout = undefined;
-        this.hass!.connection.suspend();
+      // setTimeout can be delayed in the background and only fire
+      // when we switch to the tab or app again (Hey Android!)
+      if (!document.hidden) {
+        this._suspendApp();
+      }
     }, 300000);
-    } else {
+    window.addEventListener("focus", () => this._onVisible(), { once: true });
+  }
+
+  private _suspendApp() {
+    if (!this.hass!.connection.connected) {
+      return;
+    }
+    this.hass!.connection.suspend();
+  }
+
+  private _onVisible() {
     // Clear timer to close the connection
     if (this._hiddenTimeout) {
       clearTimeout(this._hiddenTimeout);
@@ -173,7 +201,6 @@ export class HomeAssistantAppEl extends HassElement {
       this._visiblePromiseResolve = undefined;
     }
   }
-  }
 }
 
 declare global {

src/layouts/partial-panel-resolver.ts

@@ -99,11 +99,13 @@ class PartialPanelResolver extends HassRouterPage {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
+    // Attach listeners for visibility
     document.addEventListener(
       "visibilitychange",
-      () => this._handleVisibilityChange(),
+      () => this._checkVisibility(),
       false
     );
+    document.addEventListener("resume", () => this._checkVisibility());
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -156,10 +158,22 @@ class PartialPanelResolver extends HassRouterPage {
     }
   }
 
-  private _handleVisibilityChange() {
+  private _checkVisibility() {
     if (document.hidden) {
+      this._onHidden();
+    } else {
+      this._onVisible();
+    }
+  }
+
+  private _onHidden() {
     this._hiddenTimeout = window.setTimeout(() => {
       this._hiddenTimeout = undefined;
+      // setTimeout can be delayed in the background and only fire
+      // when we switch to the tab or app again (Hey Android!)
+      if (!document.hidden) {
+        return;
+      }
       const curPanel = this.hass.panels[this._currentPage];
       if (
         this.lastChild &&
@@ -175,7 +189,10 @@ class PartialPanelResolver extends HassRouterPage {
         this.removeChild(this.lastChild);
       }
     }, 300000);
-    } else {
+    window.addEventListener("focus", () => this._onVisible(), { once: true });
+  }
+
+  private _onVisible() {
     if (this._hiddenTimeout) {
       clearTimeout(this._hiddenTimeout);
       this._hiddenTimeout = undefined;
@@ -185,7 +202,6 @@ class PartialPanelResolver extends HassRouterPage {
       this._disconnectedPanel = undefined;
     }
   }
-  }
 
   private async _updateRoutes(oldPanels?: HomeAssistant["panels"]) {
     this.routerOptions = getRoutes(this.hass.panels);