Only cache default lovelace and handle config updates (#5000)

* Only cache default lovelace and handle config updates

* Update partial-panel-resolver.ts

src/layouts/partial-panel-resolver.ts

@@ -9,7 +9,7 @@ import {
 } from "./hass-router-page";
 import { removeInitSkeleton } from "../util/init-skeleton";
 
-const CACHE_COMPONENTS = ["lovelace", "states", "developer-tools"];
+const CACHE_URL_PATHS = ["lovelace", "states", "developer-tools"];
 const COMPONENTS = {
   calendar: () =>
     import(
@@ -69,11 +69,10 @@ const COMPONENTS = {
 
 const getRoutes = (panels: Panels): RouterOptions => {
   const routes: RouterOptions["routes"] = {};
-
   Object.values(panels).forEach((panel) => {
     const data: RouteOptions = {
       tag: `ha-panel-${panel.component_name}`,
-      cache: CACHE_COMPONENTS.includes(panel.component_name),
+      cache: CACHE_URL_PATHS.includes(panel.url_path),
     };
     if (panel.component_name in COMPONENTS) {
       data.load = COMPONENTS[panel.component_name];

src/managers/notification-manager.ts

@@ -82,6 +82,10 @@ class NotificationManager extends LitElement {
 
   static get styles(): CSSResult {
     return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
       mwc-button {
         color: var(--primary-color);
         font-weight: bold;

src/panels/lovelace/ha-panel-lovelace.ts

@@ -58,13 +58,42 @@ class LovelacePanel extends LitElement {
 
   private _ignoreNextUpdateEvent = false;
   private _fetchConfigOnConnect = false;
+  private _unsubUpdates?;
 
   constructor() {
     super();
     this._closeEditor = this._closeEditor.bind(this);
   }
 
-  public render(): TemplateResult | void {
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (
+      this.lovelace &&
+      this.hass &&
+      this.lovelace.language !== this.hass.language
+    ) {
+      // language has been changed, rebuild UI
+      this._setLovelaceConfig(this.lovelace.config, this.lovelace.mode);
+    } else if (this.lovelace && this.lovelace.mode === "generated") {
+      // When lovelace is generated, we re-generate each time a user goes
+      // to the states panel to make sure new entities are shown.
+      this._state = "loading";
+      this._regenerateConfig();
+    } else if (this._fetchConfigOnConnect) {
+      // Config was changed when we were not at the lovelace panel
+      this._fetchConfig(false);
+    }
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    // On the main dashboard we want to stay subscribed as that one is cached.
+    if (this.urlPath !== null && this._unsubUpdates) {
+      this._unsubUpdates();
+    }
+  }
+
+  protected render(): TemplateResult | void {
     const state = this._state!;
 
     if (state === "loaded") {
@@ -112,7 +141,7 @@ class LovelacePanel extends LitElement {
     `;
   }
 
-  public updated(changedProps: PropertyValues): void {
+  protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
     if (changedProps.has("narrow")) {
@@ -131,13 +160,10 @@ class LovelacePanel extends LitElement {
     }
   }
 
-  public firstUpdated() {
+  protected firstUpdated() {
     this._fetchConfig(false);
-    if (this.urlPath === null) {
+    if (!this._unsubUpdates) {
-      // we don't want to unsub as we want to stay informed of updates
+      this._subscribeUpdates();
-      subscribeLovelaceUpdates(this.hass!.connection, this.urlPath, () =>
-        this._lovelaceChanged()
-      );
     }
     // reload lovelace on reconnect so we are sure we have the latest config
     window.addEventListener("connection-status", (ev) => {
@@ -154,32 +180,20 @@ class LovelacePanel extends LitElement {
     this._updateColumns();
   }
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-    if (
-      this.lovelace &&
-      this.hass &&
-      this.lovelace.language !== this.hass.language
-    ) {
-      // language has been changed, rebuild UI
-      this._setLovelaceConfig(this.lovelace.config, this.lovelace.mode);
-    } else if (this.lovelace && this.lovelace.mode === "generated") {
-      // When lovelace is generated, we re-generate each time a user goes
-      // to the states panel to make sure new entities are shown.
-      this._state = "loading";
-      this._regenerateConfig();
-    } else if (this._fetchConfigOnConnect) {
-      // Config was changed when we were not at the lovelace panel
-      this._fetchConfig(false);
-    }
-  }
-
   private async _regenerateConfig() {
     const conf = await generateLovelaceConfigFromHass(this.hass!);
     this._setLovelaceConfig(conf, "generated");
     this._state = "loaded";
   }
 
+  private async _subscribeUpdates() {
+    this._unsubUpdates = await subscribeLovelaceUpdates(
+      this.hass!.connection,
+      this.urlPath,
+      () => this._lovelaceChanged()
+    );
+  }
+
   private _closeEditor() {
     this._state = "loaded";
   }
@@ -203,7 +217,7 @@ class LovelacePanel extends LitElement {
       return;
     }
     if (!this.isConnected) {
-      // We can't fire events from an element that is connected
+      // We can't fire events from an element that is not connected
       // Make sure we fetch the config as soon as the user goes back to Lovelace
       this._fetchConfigOnConnect = true;
       return;

src/translations/en.json

@@ -2005,7 +2005,7 @@
           "entity_non_numeric": "Entity is non-numeric: {entity}"
         },
         "changed_toast": {
-          "message": "The Lovelace UI configuration was updated, refresh to see changes?",
+          "message": "The Lovelace UI configuration for this dashboard was updated, refresh to see changes?",
           "refresh": "Refresh"
         },
         "reload_lovelace": "Reload UI"