Avoid re-rendering map with "sources" (#18635)

src/panels/lovelace/cards/hui-map-card.ts

@@ -20,6 +20,7 @@ import {
   formatTimeWeekday,
 } from "../../../common/datetime/format_time";
 import { computeDomain } from "../../../common/entity/compute_domain";
+import { deepEqual } from "../../../common/util/deep-equal";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-card";
 import "../../../components/ha-alert";
@@ -27,6 +28,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/map/ha-map";
 import type {
   HaMap,
+  HaMapEntity,
   HaMapPathPoint,
   HaMapPaths,
 } from "../../../components/map/ha-map";
@@ -70,6 +72,8 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _configEntities?: MapEntityConfig[];
 
+  @state() private _mapEntities: HaMapEntity[] = [];
+
   private _colorDict: Record<string, string> = {};
 
   private _colorIndex = 0;
@@ -102,6 +106,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     this._configEntities = config.entities
       ? processConfigEntities<MapEntityConfig>(config.entities)
       : [];
+    this._mapEntities = this._getMapEntities();
   }
 
   public getCardSize(): number {
@@ -156,14 +161,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         <div id="root">
           <ha-map
             .hass=${this.hass}
-            .entities=${this._getEntities(
+            .entities=${this._mapEntities}
-              this.hass.states,
-              this._config,
-              this._configEntities
-            )}
             .zoom=${this._config.default_zoom ?? DEFAULT_ZOOM}
             .paths=${this._getHistoryPaths(this._config, this._stateHistory)}
-            .autoFit=${this._config.auto_fit}
+            .autoFit=${this._config.auto_fit || false}
             .fitZones=${this._config.fit_zones}
             .darkMode=${this._config.dark_mode}
             interactiveZones
@@ -212,6 +213,20 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       : hasConfigChanged(this, changedProps);
   }
 
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (
+      changedProps.has("hass") &&
+      this._config?.geo_location_sources &&
+      !deepEqual(
+        this._getSourceEntities(changedProps.get("hass")?.states),
+        this._getSourceEntities(this.hass.states)
+      )
+    ) {
+      this._mapEntities = this._getMapEntities();
+    }
+  }
+
   public connectedCallback() {
     super.connectedCallback();
     if (this.hasUpdated && this._configEntities?.length) {
@@ -309,46 +324,43 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     return color;
   }
 
-  private _getEntities = memoizeOne(
+  private _getSourceEntities(states?: HassEntities): string[] {
-    (
+    if (!states || !this._config?.geo_location_sources) {
-      states: HassEntities,
+      return [];
-      config: MapCardConfig,
-      configEntities?: MapEntityConfig[]
-    ) => {
-      if (!states || !config) {
-        return undefined;
     }
 
     const geoEntities: string[] = [];
-      if (config.geo_location_sources) {
     // Calculate visible geo location sources
-        const includesAll = config.geo_location_sources.includes("all");
+    const includesAll = this._config.geo_location_sources.includes("all");
     for (const stateObj of Object.values(states)) {
       if (
         computeDomain(stateObj.entity_id) === "geo_location" &&
         (includesAll ||
-              config.geo_location_sources.includes(stateObj.attributes.source))
+          this._config.geo_location_sources.includes(
+            stateObj.attributes.source
+          ))
       ) {
         geoEntities.push(stateObj.entity_id);
       }
     }
+    return geoEntities;
   }
 
+  private _getMapEntities(): HaMapEntity[] {
     return [
-        ...(configEntities || []).map((entityConf) => ({
+      ...(this._configEntities || []).map((entityConf) => ({
         entity_id: entityConf.entity,
         color: this._getColor(entityConf.entity),
         label_mode: entityConf.label_mode,
         focus: entityConf.focus,
         name: entityConf.name,
       })),
-        ...geoEntities.map((entity) => ({
+      ...this._getSourceEntities(this.hass?.states).map((entity) => ({
         entity_id: entity,
         color: this._getColor(entity),
       })),
     ];
   }
-  );
 
   private _getHistoryPaths = memoizeOne(
     (