Merge pull request #685 from dermotduffy/card-mod-fix-performance

Don't re-render the whole card for conditionState

src/card.ts

@@ -28,6 +28,7 @@ import './components/gallery.js';
 import './components/image.js';
 import { FrigateCardImage } from './components/image.js';
 import './components/live.js';
+import { FrigateCardLive } from './components/live.js';
 import './components/menu.js';
 import { FrigateCardMenu, FRIGATE_BUTTON_MENU_ICON } from './components/menu.js';
 import './components/message.js';
@@ -164,12 +165,12 @@ export class FrigateCard extends LitElement {
   @property({ attribute: false })
   protected _view?: View;
 
-  @state()
   protected _conditionState?: ConditionState;
 
   protected _refMenu: Ref<FrigateCardMenu> = createRef();
   protected _refElements: Ref<FrigateCardElements> = createRef();
   protected _refImage: Ref<FrigateCardImage> = createRef();
+  protected _refLive: Ref<FrigateCardLive> = createRef();
 
   // user interaction timer ("screensaver" functionality, return to default
   // view after user interaction).
@@ -273,6 +274,17 @@ export class FrigateCard extends LitElement {
       state: this._hass?.states,
     };
 
+    // Update the components that need the new condition state. Passed directly
+    // to them to avoid the performance hit of a entire card re-render (esp.
+    // when using card-mod).
+    // https://github.com/dermotduffy/frigate-hass-card/issues/678
+    if (this._refLive.value) {
+      this._refLive.value.conditionState = this._conditionState;
+    }
+    if (this._refElements.value) {
+      this._refElements.value.conditionState = this._conditionState;
+    }
+
     const overriddenConfig = getOverriddenConfig(
       this._config,
       this._config.overrides,
@@ -1813,6 +1825,7 @@ export class FrigateCard extends LitElement {
         this._getConfig().live.preload || (!this._message && this._view.is('live'))
           ? html`
               <frigate-card-live
+                ${ref(this._refLive)}
                 .hass=${this._hass}
                 .view=${this._view}
                 .liveConfig=${this._config.live}

src/components/elements.ts

@@ -156,10 +156,10 @@ export class FrigateCardElements extends LitElement {
   public hass?: HomeAssistant;
 
   @property({ attribute: false })
-  protected elements: PictureElements;
+  public conditionState?: ConditionState;
 
   @property({ attribute: false })
-  protected conditionState?: ConditionState;
+  protected elements: PictureElements;
 
   protected _boundMenuRemoveHandler = this._menuRemoveHandler.bind(this);
 

src/components/live.ts

@@ -61,6 +61,9 @@ const URL_SIGN_REFRESH_THRESHOLD_SECONDS = 1 * 60 * 60;
 
 @customElement('frigate-card-live')
 export class FrigateCardLive extends LitElement {
+  @property({ attribute: false })
+  public conditionState?: ConditionState;
+
   @property({ attribute: false })
   protected hass?: ExtendedHomeAssistant;
 
@@ -76,9 +79,6 @@ export class FrigateCardLive extends LitElement {
   @property({ attribute: false, hasChanged: contentsChanged })
   protected liveOverrides?: LiveOverrides;
 
-  @property({ attribute: false })
-  protected conditionState?: ConditionState;
-
   set preloaded(preloaded: boolean) {
     this._preloaded = preloaded;