Fix a bunch of updates triggering updated (#9260)

src/components/ha-cover-controls.ts

@@ -23,8 +23,8 @@ class HaCoverControls extends LitElement {
 
   @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
+  public willUpdate(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);

src/components/ha-cover-tilt-controls.ts

@@ -22,8 +22,8 @@ class HaCoverTiltControls extends LitElement {
 
   @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
+  public willUpdate(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);

src/components/user/ha-user-badge.ts

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -32,13 +39,13 @@ class UserBadge extends LitElement {
 
   private _personEntityId?: string;
 
-  protected updated(changedProps) {
+  public willUpdate(changedProps: PropertyValues<this>) {
-    super.updated(changedProps);
+    super.willUpdate(changedProps);
     if (changedProps.has("user")) {
       this._getPersonPicture();
       return;
     }
-    const oldHass = changedProps.get("hass");
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (
       this._personEntityId &&
       oldHass &&

src/panels/calendar/ha-full-calendar.ts

@@ -90,9 +90,9 @@ export class HAFullCalendar extends LitElement {
 
   @property() public initialView: FullCalendarView = "dayGridMonth";
 
-  @state() private calendar?: Calendar;
+  private calendar?: Calendar;
 
-  @state() private _activeView?: FullCalendarView;
+  @state() private _activeView = this.initialView;
 
   public updateSize(): void {
     this.calendar?.updateSize();
@@ -181,8 +181,8 @@ export class HAFullCalendar extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
+  public willUpdate(changedProps: PropertyValues): void {
-    super.updated(changedProps);
+    super.willUpdate(changedProps);
 
     if (!this.calendar) {
       return;
@@ -216,8 +216,6 @@ export class HAFullCalendar extends LitElement {
       initialView: this.initialView,
     };
 
-    this._activeView = this.initialView;
-
     config.dateClick = (info) => this._handleDateClick(info);
     config.eventClick = (info) => this._handleEventClick(info);
 

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

@@ -48,10 +48,12 @@ class PanelCalendar extends LitElement {
 
   private _end?: Date;
 
-  protected firstUpdated(changedProps: PropertyValues): void {
+  public willUpdate(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
+    super.willUpdate(changedProps);
+    if (!this.hasUpdated) {
       this._calendars = getCalendars(this.hass);
     }
+  }
 
   protected render(): TemplateResult {
     return html`

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

@@ -214,11 +214,27 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     }
 
     if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
-      this._setHum = this._getSetHum(stateObj);
       this._rescale_svg();
     }
   }
 
+  public willUpdate(changedProps: PropertyValues) {
+    if (!this.hass || !this._config || !changedProps.has("hass")) {
+      return;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+    if (!stateObj) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
+      this._setHum = this._getSetHum(stateObj);
+    }
+  }
+
   private _rescale_svg() {
     // Set the viewbox of the SVG containing the set humidity to perfectly
     // fit the text

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -325,12 +325,15 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
-    this._measureCard();
     this._attachObserver();
   }
 
-  protected updated(changedProps: PropertyValues): void {
+  public willUpdate(changedProps: PropertyValues): void {
-    super.updated(changedProps);
+    super.willUpdate(changedProps);
+
+    if (!this.hasUpdated) {
+      this._measureCard();
+    }
 
     if (
       !this._config ||
@@ -352,6 +355,35 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       return;
     }
 
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    const oldImage =
+      oldHass?.states[this._config.entity]?.attributes.entity_picture_local ||
+      oldHass?.states[this._config.entity]?.attributes.entity_picture;
+
+    if (!this._image) {
+      this._foregroundColor = undefined;
+      this._backgroundColor = undefined;
+      return;
+    }
+
+    if (this._image !== oldImage) {
+      this._setColors();
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this._stateObj ||
+      (!changedProps.has("_config") && !changedProps.has("hass"))
+    ) {
+      return;
+    }
+
+    const stateObj = this._stateObj;
+
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     const oldConfig = changedProps.get("_config") as
       | MediaControlCardConfig
@@ -384,20 +416,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       clearInterval(this._progressInterval);
       this._progressInterval = undefined;
     }
-
-    const oldImage =
-      oldHass?.states[this._config.entity]?.attributes.entity_picture_local ||
-      oldHass?.states[this._config.entity]?.attributes.entity_picture;
-
-    if (!this._image) {
-      this._foregroundColor = undefined;
-      this._backgroundColor = undefined;
-      return;
-    }
-
-    if (this._image !== oldImage) {
-      this._setColors();
-    }
   }
 
   private get _image() {

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

@@ -300,11 +300,27 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     }
 
     if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
-      this._setTemp = this._getSetTemp(stateObj);
       this._rescale_svg();
     }
   }
 
+  public willUpdate(changedProps: PropertyValues) {
+    if (!this.hass || !this._config || !changedProps.has("hass")) {
+      return;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+    if (!stateObj) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
+      this._setTemp = this._getSetTemp(stateObj);
+    }
+  }
+
   private _rescale_svg() {
     // Set the viewbox of the SVG containing the set temperature to perfectly
     // fit the text

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -106,8 +106,13 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
-  protected firstUpdated(): void {
+  public willUpdate(): void {
+    if (!this.hasUpdated) {
       this._measureCard();
+    }
+  }
+
+  protected firstUpdated(): void {
     this._attachObserver();
   }
 
@@ -129,7 +134,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       (changedProps.has("_config") && oldConfig!.theme !== this._config.theme)
     ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
-      this.requestUpdate();
     }
   }
 

src/panels/lovelace/components/hui-graph-base.ts

@@ -47,7 +47,7 @@ export class HuiGraphBase extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues) {
     if (!this.coordinates) {
       return;
     }

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -65,8 +65,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     this._resizeObserver?.unobserve(this);
   }
 
-  protected firstUpdated(): void {
+  public willUpdate(): void {
+    if (!this.hasUpdated) {
       this._measureCard();
+    }
+  }
+
+  protected firstUpdated(): void {
     this._attachObserver();
   }