Add cheaper progress indicator.

src/components/gallery.ts

@@ -11,6 +11,7 @@ import { customElement, property } from 'lit/decorators.js';
 import galleryStyle from '../scss/gallery.scss';
 import {
   CameraConfig,
+  CardWideConfig,
   ExtendedHomeAssistant,
   frigateCardConfigDefaults,
   GalleryConfig,
@@ -46,6 +47,9 @@ export class FrigateCardGallery extends LitElement {
   @property({ attribute: false })
   public dataManager?: DataManager;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   /**
    * Master render method.
    * @returns A rendered template.
@@ -96,7 +100,7 @@ export class FrigateCardGallery extends LitElement {
           browseMediaQueryParameters,
         );
       }
-      return renderProgressIndicator();
+      return renderProgressIndicator({cardWideConfig: this.cardWideConfig});
     }
 
     return html`

src/components/live.ts

@@ -27,6 +27,7 @@ import liveCarouselStyle from '../scss/live-carousel.scss';
 import liveProviderStyle from '../scss/live-provider.scss';
 import {
   CameraConfig,
+  CardWideConfig,
   ExtendedHomeAssistant,
   frigateCardConfigDefaults,
   FrigateCardError,
@@ -99,6 +100,9 @@ export class FrigateCardLive extends LitElement {
   @property({ attribute: false })
   public dataManager?: DataManager;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   // Whether or not the live view is currently in the background (i.e. preloaded
   // but not visible)
   @state()
@@ -250,6 +254,7 @@ export class FrigateCardLive extends LitElement {
           .inBackground=${this._inBackground}
           .conditionState=${this.conditionState}
           .liveOverrides=${this.liveOverrides}
+          .cardWideConfig=${this.cardWideConfig}
         >
         </frigate-card-live-carousel>
       </frigate-card-surround>`,
@@ -290,6 +295,9 @@ export class FrigateCardLiveCarousel extends LitElement {
   @property({ attribute: false })
   public conditionState?: ConditionState;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   // Index between camera name and slide number.
   protected _cameraToSlide: Record<string, number> = {};
   protected _refMediaCarousel: Ref<FrigateCardMediaCarousel> = createRef();
@@ -520,6 +528,7 @@ export class FrigateCardLiveCarousel extends LitElement {
           .label=${getCameraTitle(this.hass, cameraConfig)}
           .liveConfig=${config}
           .hass=${this.hass}
+          .cardWideConfig=${this.cardWideConfig}
           @frigate-card:media:loaded=${(ev: CustomEvent<MediaLoadedInfo>) => {
             wrapMediaLoadedEventForCarousel(slideIndex, ev);
           }}
@@ -667,6 +676,9 @@ export class FrigateCardLiveProvider extends LitElement {
   @property({ attribute: false })
   public label = '';
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   @state()
   protected _isVideoMediaLoaded = false;
 
@@ -819,6 +831,7 @@ export class FrigateCardLiveProvider extends LitElement {
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
             .webRTCConfig=${this.liveConfig.webrtc_card}
+            .cardWideConfig=${this.cardWideConfig}
             @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
           >
           </frigate-card-live-webrtc-card>`
@@ -828,6 +841,7 @@ export class FrigateCardLiveProvider extends LitElement {
             .hass=${this.hass}
             .cameraConfig=${this.cameraConfig}
             .jsmpegConfig=${this.liveConfig.jsmpeg}
+            .cardWideConfig=${this.cardWideConfig}
             @frigate-card:media:loaded=${this._videoMediaShowHandler.bind(this)}
           >
           </frigate-card-live-jsmpeg>`}
@@ -950,6 +964,9 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
   @property({ attribute: false })
   public cameraConfig?: CameraConfig;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   protected hass?: HomeAssistant;
 
   // A task to await the load of the WebRTC component.
@@ -1079,9 +1096,13 @@ export class FrigateCardLiveWebRTCCard extends LitElement {
     // Use a task to allow us to asynchronously wait for the WebRTC card to
     // load, but yet still have the card load be followed by the updated()
     // lifecycle callback (unlike just using `until`).
-    return renderTask(this, this._webrtcTask, render, () =>
-      renderProgressIndicator(localize('error.webrtc_card_waiting')),
-    );
+    return renderTask(this, this._webrtcTask, render, {
+      inProgressFunc: () =>
+        renderProgressIndicator({
+          message: localize('error.webrtc_card_waiting'),
+          cardWideConfig: this.cardWideConfig,
+        }),
+    });
   }
 
   /**
@@ -1121,6 +1142,9 @@ export class FrigateCardLiveJSMPEG extends LitElement {
   @property({ attribute: false, hasChanged: contentsChanged })
   public jsmpegConfig?: JSMPEGConfig;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   protected hass?: ExtendedHomeAssistant;
 
   protected _jsmpegCanvasElement?: HTMLCanvasElement;
@@ -1327,7 +1351,12 @@ export class FrigateCardLiveJSMPEG extends LitElement {
       }
       return html`${this._jsmpegCanvasElement}`;
     };
-    return html`${until(_render(), renderProgressIndicator())}`;
+    return html`${until(
+      _render(),
+      renderProgressIndicator({
+        cardWideConfig: this.cardWideConfig,
+      }),
+    )}`;
   }
 
   /**

src/components/message.ts

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { TROUBLESHOOTING_URL } from '../const.js';
 import { localize } from '../localize/localize.js';
 import messageStyle from '../scss/message.scss';
-import { FrigateCardError, Message, MessageType } from '../types.js';
+import { CardWideConfig, FrigateCardError, Message, MessageType } from '../types.js';
 import { dispatchFrigateCardEvent } from '../utils/basic.js';
 
 @customElement('frigate-card-message')
@@ -82,11 +82,14 @@ export class FrigateCardProgressIndicator extends LitElement {
   @property({ attribute: false })
   public message: string | TemplateResult = '';
 
+  @property({ attribute: false })
+  public animated = false;
+
   protected render(): TemplateResult {
     return html` <div class="message vertical">
-      <span>
-        <ha-circular-progress active="true" size="large"> </ha-circular-progress>
-      </span>
+      ${this.animated
+        ? html`<ha-circular-progress active="true" size="large"> </ha-circular-progress>`
+        : html`<ha-icon icon="mdi:timer-sand"></ha-icon>`}
       ${this.message ? html`<span>${this.message}</span>` : html``}
     </div>`;
   }
@@ -112,9 +115,15 @@ export function renderMessage(message: Message): TemplateResult {
   return html``;
 }
 
-export function renderProgressIndicator(message?: string): TemplateResult {
+export function renderProgressIndicator(options?: {
+  message?: string;
+  cardWideConfig?: CardWideConfig;
+}): TemplateResult {
   return html`
-    <frigate-card-progress-indicator .message=${message || ''}>
+    <frigate-card-progress-indicator
+      .message=${options?.message || ''}
+      .animated=${options?.cardWideConfig?.performance?.profile !== 'low'}
+    >
     </frigate-card-progress-indicator>
   `;
 }

src/components/next-prev-control.ts

@@ -91,7 +91,7 @@ export class FrigateCardNextPreviousControl extends LitElement {
               aria-label="${this.label}"
             />`
           : html``,
-      () => html`<div class=${classMap(classes)}></div>`,
+      { inProgressFunc: () => html`<div class=${classMap(classes)}></div>` },
     );
   }
 

src/components/thumbnail.ts

@@ -95,7 +95,7 @@ export class FrigateCardThumbnailFeatureEvent extends LitElement {
           this._embedThumbnailTask,
           (embeddedThumbnail: string | null) =>
             embeddedThumbnail ? html`<img src="${embeddedThumbnail}" />` : html``,
-          () => imageOff,
+          {inProgressFunc: () => imageOff},
         )
       : imageOff} `;
   }

src/components/viewer.ts

@@ -20,6 +20,7 @@ import {
   BrowseMediaNeighbors,
   BrowseMediaQueryParameters,
   CameraConfig,
+  CardWideConfig,
   ExtendedHomeAssistant,
   FrigateBrowseMediaSource,
   frigateCardConfigDefaults,
@@ -97,6 +98,9 @@ export class FrigateCardViewer extends LitElement {
   @property({ attribute: false })
   public dataManager?: DataManager;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   /**
    * Master render method.
    * @returns A rendered template.
@@ -151,7 +155,7 @@ export class FrigateCardViewer extends LitElement {
           }),
         );
       }
-      return renderProgressIndicator();
+      return renderProgressIndicator({ cardWideConfig: this.cardWideConfig });
     }
 
     return html` <frigate-card-surround
@@ -169,6 +173,7 @@ export class FrigateCardViewer extends LitElement {
         .viewerConfig=${this.viewerConfig}
         .browseMediaQueryParameters=${browseMediaQueryParameters}
         .resolvedMediaCache=${this.resolvedMediaCache}
+        .cardWideConfig=${this.cardWideConfig}
       >
       </frigate-card-viewer-carousel>
     </frigate-card-surround>`;
@@ -206,6 +211,9 @@ export class FrigateCardViewerCarousel extends LitElement {
   @property({ attribute: false })
   public resolvedMediaCache?: ResolvedMediaCache;
 
+  @property({ attribute: false })
+  public cardWideConfig?: CardWideConfig;
+
   protected _refMediaCarousel: Ref<FrigateCardMediaCarousel> = createRef();
 
   // Mapping of slide # to FrigateBrowseMediaSource child #.
@@ -645,7 +653,9 @@ export class FrigateCardViewerCarousel extends LitElement {
     // If lazy loading is not enabled, wait for the media resolver task to
     // complete and show a progress indictator until this.
     if (!this.viewerConfig?.lazy_load && !this._isMediaFullyResolved()) {
-      return renderTask(this, this._mediaResolutionTask, this._render.bind(this));
+      return renderTask(this, this._mediaResolutionTask, this._render.bind(this), {
+        cardWideConfig: this.cardWideConfig,
+      });
     }
     return this._render();
   }