diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index 755584f0c2..e8383d1a45 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -91,6 +91,20 @@ class PartialPanelResolver extends HassRouterPage {
 
   private _waitForStart = false;
 
+  private _disconnectedPanel?: ChildNode;
+
+  private _hiddenTimeout?: number;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    document.addEventListener(
+      "visibilitychange",
+      () => this._handleVisibilityChange(),
+      false
+    );
+  }
+
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
@@ -141,6 +155,27 @@ class PartialPanelResolver extends HassRouterPage {
     }
   }
 
+  private _handleVisibilityChange() {
+    if (document.hidden) {
+      this._hiddenTimeout = window.setTimeout(() => {
+        this._hiddenTimeout = undefined;
+        if (this.lastChild) {
+          this._disconnectedPanel = this.lastChild;
+          this.removeChild(this.lastChild);
+        }
+      }, 300000);
+    } else {
+      if (this._hiddenTimeout) {
+        clearTimeout(this._hiddenTimeout);
+        this._hiddenTimeout = undefined;
+      }
+      if (this._disconnectedPanel) {
+        this.appendChild(this._disconnectedPanel);
+        this._disconnectedPanel = undefined;
+      }
+    }
+  }
+
   private async _updateRoutes(oldPanels?: HomeAssistant["panels"]) {
     this.routerOptions = getRoutes(this.hass.panels);