Optimise data table and device dashboard (#9217)

src/components/data-table/ha-data-table.ts

@@ -173,8 +173,8 @@ export class HaDataTable extends LitElement {
     this.updateComplete.then(() => this._calcTableHeight());
   }
 
-  protected updated(properties: PropertyValues) {
+  public willUpdate(properties: PropertyValues) {
-    super.updated(properties);
+    super.willUpdate(properties);
 
     if (properties.has("columns")) {
       this._filterable = Object.values(this.columns).some(
@@ -342,6 +342,10 @@ export class HaDataTable extends LitElement {
                     layout: Layout1d,
                     // @ts-expect-error
                     renderItem: (row: DataTableRowData, index) => {
+                      // not sure how this happens...
+                      if (!row) {
+                        return "";
+                      }
                       if (row.append) {
                         return html`
                           <div class="mdc-data-table__row">${row.content}</div>
@@ -474,15 +478,16 @@ export class HaDataTable extends LitElement {
     }
 
     if (this.appendRow || this.hasFab) {
-      this._items = [...data];
+      const items = [...data];
 
       if (this.appendRow) {
-        this._items.push({ append: true, content: this.appendRow });
+        items.push({ append: true, content: this.appendRow });
       }
 
       if (this.hasFab) {
-        this._items.push({ empty: true });
+        items.push({ empty: true });
       }
+      this._items = items;
     } else {
       this._items = data;
     }

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -68,6 +68,30 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   @state() private _numHiddenDevices = 0;
 
+  private _ignoreLocationChange = false;
+
+  public constructor() {
+    super();
+    window.addEventListener("location-changed", () => {
+      if (this._ignoreLocationChange) {
+        this._ignoreLocationChange = false;
+        return;
+      }
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
+    });
+    window.addEventListener("popstate", () => {
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
+    });
+  }
+
   private _activeFilters = memoizeOne(
     (
       entries: ConfigEntry[],
@@ -78,10 +102,6 @@ export class HaConfigDeviceDashboard extends LitElement {
       filters.forEach((value, key) => {
         switch (key) {
           case "config_entry": {
-            // If we are requested to show the devices for a given config entry,
-            // also show the disabled ones by default.
-            this._showDisabled = true;
-
             const configEntry = entries.find(
               (entry) => entry.entry_id === value
             );
@@ -118,7 +138,6 @@ export class HaConfigDeviceDashboard extends LitElement {
     ) => {
       // Some older installations might have devices pointing at invalid entryIDs
       // So we guard for that.
-
       let outputDevices: DeviceRowData[] = devices;
 
       const deviceLookup: { [deviceId: string]: DeviceRegistryEntry } = {};
@@ -315,14 +334,14 @@ export class HaConfigDeviceDashboard extends LitElement {
     }
   );
 
-  public constructor() {
+  public willUpdate(changedProps) {
-    super();
+    if (changedProps.has("_searchParms")) {
-    window.addEventListener("location-changed", () => {
+      if (this._searchParms.get("config_entry")) {
-      this._searchParms = new URLSearchParams(window.location.search);
+        // If we are requested to show the devices for a given config entry,
-    });
+        // also show the disabled ones by default.
-    window.addEventListener("popstate", () => {
+        this._showDisabled = true;
-      this._searchParms = new URLSearchParams(window.location.search);
+      }
-    });
+    }
   }
 
   protected render(): TemplateResult {
@@ -435,6 +454,7 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const deviceId = ev.detail.id;
+    this._ignoreLocationChange = true;
     navigate(this, `/config/devices/device/${deviceId}`);
   }
 

src/panels/config/entities/ha-config-entities.ts

@@ -391,10 +391,18 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   public constructor() {
     super();
     window.addEventListener("location-changed", () => {
-      this._searchParms = new URLSearchParams(window.location.search);
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
     });
     window.addEventListener("popstate", () => {
-      this._searchParms = new URLSearchParams(window.location.search);
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
     });
   }
 
@@ -623,8 +631,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     loadEntityEditorDialog();
   }
 
-  protected updated(changedProps): void {
+  public willUpdate(changedProps): void {
-    super.updated(changedProps);
+    super.willUpdate(changedProps);
     const oldHass = changedProps.get("hass");
     let changed = false;
     if (!this.hass || !this._entities) {