Fix Lovelace view background flicker when switching between views with identical backgrounds

src/panels/lovelace/hui-root.ts

@@ -614,15 +614,16 @@ class HUIRoot extends LitElement {
               : nothing}
           </slot>
         </div>
+        <hui-view-background
+          .hass=${this.hass}
+          .background=${background}
+        ></hui-view-background>
         <hui-view-container
           class=${this._editMode ? "has-tab-bar" : ""}
           .hass=${this.hass}
           .theme=${curViewConfig?.theme}
           id="view"
-        >
-          <hui-view-background .hass=${this.hass} .background=${background}>
-          </hui-view-background>
-        </hui-view-container>
+        ></hui-view-container>
       </div>
     `;
   }
@@ -1490,6 +1491,14 @@ class HUIRoot extends LitElement {
           flex: 1 1 100%;
           max-width: 100%;
         }
+        hui-view-background {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: -1;
+        }
         /**
          * In edit mode we have the tab bar on a new line *
          */

src/panels/lovelace/views/hui-view-background.ts

@@ -3,11 +3,14 @@ import type { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewBackgroundConfig } from "../../../data/lovelace/config/view";
+import { deepEqual } from "../../../common/util/deep-equal";
 import {
   isMediaSourceContentId,
   resolveMediaSource,
 } from "../../../data/media_source";
 
+const mediaSourceUrlCache = new Map<string, string>();
+
 @customElement("hui-view-background")
 export class HUIViewBackground extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -19,25 +22,43 @@ export class HUIViewBackground extends LitElement {
 
   @state({ attribute: false }) resolvedImage?: string;
 
+  private _currentMediaContentId?: string;
+
+  private _pendingMediaContentId?: string;
+
   protected render() {
     return nothing;
   }
 
   private _fetchMedia() {
-    const backgroundImage =
-      typeof this.background === "string"
-        ? this.background
-        : typeof this.background?.image === "object"
-          ? this.background.image.media_content_id
-          : this.background?.image;
+    const backgroundImage = this._getBackgroundImageSource(this.background);
+
+    if (this._currentMediaContentId === backgroundImage) {
+      return;
+    }
+    this._currentMediaContentId = backgroundImage;
 
     if (backgroundImage && isMediaSourceContentId(backgroundImage)) {
+      const cachedImage = mediaSourceUrlCache.get(backgroundImage);
+      if (cachedImage) {
+        this._pendingMediaContentId = undefined;
+        this.resolvedImage = cachedImage;
+        return;
+      }
+      this._pendingMediaContentId = backgroundImage;
       resolveMediaSource(this.hass, backgroundImage).then((result) => {
+        if (this._pendingMediaContentId !== backgroundImage) {
+          return;
+        }
+        mediaSourceUrlCache.set(backgroundImage, result.url);
+        this._pendingMediaContentId = undefined;
         this.resolvedImage = result.url;
       });
-    } else {
-      this.resolvedImage = undefined;
+      return;
     }
+
+    this._pendingMediaContentId = undefined;
+    this.resolvedImage = undefined;
   }
 
   private _applyTheme() {
@@ -51,12 +72,23 @@ export class HUIViewBackground extends LitElement {
     );
     const viewBackground = this._computeBackgroundProperty(this.background);
     this.toggleAttribute("fixed-background", fixedBackground);
-    this.style.setProperty("--view-background", viewBackground);
+    if (viewBackground !== null) {
+      this.style.setProperty("--view-background", viewBackground);
+    } else if (!this._isPendingMediaSourceBackground()) {
+      this.style.removeProperty("--view-background");
+    }
 
     const viewBackgroundOpacity = this._computeBackgroundOpacityProperty(
       this.background
     );
-    this.style.setProperty("--view-background-opacity", viewBackgroundOpacity);
+    if (viewBackgroundOpacity !== null) {
+      this.style.setProperty(
+        "--view-background-opacity",
+        viewBackgroundOpacity
+      );
+    } else {
+      this.style.removeProperty("--view-background-opacity");
+    }
   }
 
   private _isFixedBackground(
@@ -75,17 +107,14 @@ export class HUIViewBackground extends LitElement {
     background?: string | LovelaceViewBackgroundConfig
   ) {
     if (typeof background === "object" && background.image) {
-      const image =
-        typeof background.image === "object"
-          ? background.image.media_content_id || ""
-          : background.image;
-      if (isMediaSourceContentId(image) && !this.resolvedImage) {
+      const image = this._getBackgroundImageSource(background);
+      if (image && isMediaSourceContentId(image) && !this.resolvedImage) {
         return null;
       }
       const alignment = background.alignment ?? "center";
       const size = background.size ?? "cover";
       const repeat = background.repeat ?? "no-repeat";
-      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || image)}')`;
+      return `${alignment} / ${size} ${repeat} url('${this.hass.hassUrl(this.resolvedImage || image || "")}')`;
     }
     if (typeof background === "string") {
       if (isMediaSourceContentId(background) && !this.resolvedImage) {
@@ -107,6 +136,28 @@ export class HUIViewBackground extends LitElement {
     return null;
   }
 
+  private _getBackgroundImageSource(
+    background?: string | LovelaceViewBackgroundConfig
+  ): string | undefined {
+    if (typeof background === "string") {
+      return background;
+    }
+    if (typeof background?.image === "object") {
+      return background.image.media_content_id;
+    }
+    return background?.image;
+  }
+
+  private _isPendingMediaSourceBackground() {
+    const backgroundImage = this._getBackgroundImageSource(this.background);
+    if (!backgroundImage || !isMediaSourceContentId(backgroundImage)) {
+      return false;
+    }
+    return (
+      this._pendingMediaContentId === backgroundImage && !this.resolvedImage
+    );
+  }
+
   protected willUpdate(changedProperties: PropertyValues<this>) {
     super.willUpdate(changedProperties);
     let applyTheme = false;
@@ -122,8 +173,13 @@ export class HUIViewBackground extends LitElement {
     }
 
     if (changedProperties.has("background")) {
-      applyTheme = true;
-      this._fetchMedia();
+      const oldBackground = changedProperties.get(
+        "background"
+      ) as this["background"];
+      if (!deepEqual(this.background, oldBackground)) {
+        applyTheme = true;
+        this._fetchMedia();
+      }
     }
     if (changedProperties.has("resolvedImage")) {
       applyTheme = true;
@@ -134,29 +190,18 @@ export class HUIViewBackground extends LitElement {
   }
 
   static styles = css`
-    /* Fixed background hack for Safari iOS */
-    :host([fixed-background]) {
-      display: block;
-      z-index: -1;
-      position: fixed;
-      background-attachment: scroll !important;
-    }
-    :host(:not([fixed-background])) {
-      z-index: -1;
-      position: absolute;
-    }
     :host {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
-      width: 100%;
+      display: block;
       background: var(
         --view-background,
         var(--lovelace-background, var(--primary-background-color))
       );
-      opacity: var(--view-background-opacity);
+      opacity: var(--view-background-opacity, 1);
+      transition: background 0.3s ease;
+    }
+    /* Fixed background hack for Safari iOS */
+    :host([fixed-background]) {
+      background-attachment: scroll !important;
     }
   `;
 }