Add consistent initialization logic to improve Chromecast support.

src/card.ts

@@ -57,6 +57,7 @@ import {
   homeAssistantWSRequest,
   isValidMediaShowInfo,
   shouldUpdateBasedOnHass,
+  sideLoadHomeAssistantElements,
 } from './common.js';
 import { localize } from './localize/localize.js';
 import { renderMessage, renderProgressIndicator } from './components/message.js';
@@ -186,6 +187,9 @@ export class FrigateCard extends LitElement {
   // per second for performance reasons.
   protected _boundMouseHandler = throttle(this._mouseHandler.bind(this), 1 * 1000);
 
+  // Whether the card has been successfully initialized.
+  protected _initialized = false;
+
   /**
    * Set the Home Assistant object.
    */
@@ -830,6 +834,19 @@ export class FrigateCard extends LitElement {
     this._changeView({ view: e.detail });
   }
 
+  /**
+   * Called before each update.
+   */
+  protected willUpdate(): void {
+    if (!this._initialized) {
+      sideLoadHomeAssistantElements().then((success) => {
+        if (success) {
+          this._initialized = true;
+        }
+      })
+    }
+  }
+
   /**
    * Determine whether the element should be updated.
    * @param changedProps The changed properties if any.