Simplify loading spinner.

This is slightly less fancy, but removes code. I'm guessing no-one will notice or care enough to raise it! (BMFW).

src/card.ts

@@ -339,9 +339,8 @@ class FrigateCard extends LitElement {
 
     const actions = this._controller.getActionsManager().getMergedActions();
     const cameraManager = this._controller.getCameraManager();
-    const renderLoadingSpinner =
-      this._config?.performance?.features.animated_progress_indicator !== false;
     const showLoadingSpinner =
+      this._config?.performance?.features.animated_progress_indicator !== false &&
       !this._controller.getInitializationManager().wasEverInitialized() &&
       !this._controller.getMessageManager().hasMessage();
 
@@ -372,10 +371,7 @@ class FrigateCard extends LitElement {
         }
         @frigate-card:focus=${() => this.focus()}
       >
-        ${renderLoadingSpinner
-          ? html`<frigate-card-loading .show=${showLoadingSpinner}>
-            </frigate-card-loading>`
-          : ''}
+        ${showLoadingSpinner ? html`<frigate-card-loading></frigate-card-loading>` : ''}
         ${this._renderMenuStatusContainer('top')}
         ${this._renderMenuStatusContainer('overlay')}
         <div ${ref(this._refMain)} class="${classMap(mainClasses)}">

src/components/loading.ts

@@ -1,44 +1,16 @@
-import {
-  CSSResultGroup,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-  html,
-  unsafeCSS,
-} from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import irisLogo from '../images/camera-iris-transparent.svg';
-import controlStyle from '../scss/loading.scss';
-import { Timer } from '../utils/timer';
-
-// Number of seconds after the loading spinner is hidden before rendering this
-// component as empty. Should be longer than the opacity css transition time.
-const LOADING_EMPTY_SECONDS = 2;
+import loadingStyle from '../scss/loading.scss';
 
 @customElement('frigate-card-loading')
 export class FrigateCardLoading extends LitElement {
-  @property({ attribute: true, reflect: true, type: Boolean })
-  public show = false;
-
-  @state()
-  protected _empty = false;
-
-  protected _timer = new Timer();
-
   protected render(): TemplateResult {
-    return this._empty ? html`` : html` <img src="${irisLogo}" /> `;
-  }
-
-  protected willUpdate(changedProps: PropertyValues): void {
-    if (changedProps.has('show') && !this.show) {
-      this._timer.start(LOADING_EMPTY_SECONDS, () => {
-        this._empty = true;
-      });
-    }
+    return html` <img src="${irisLogo}" /> `;
   }
 
   static get styles(): CSSResultGroup {
-    return unsafeCSS(controlStyle);
+    return unsafeCSS(loadingStyle);
   }
 }
 

src/scss/loading.scss

@@ -1,28 +1,16 @@
 :host {
-  height: 100%;
-  width: 100%;
+  width: intrinsic;
+  height: intrinsic;
 
   display: flex;
   justify-content: center;
   align-items: center;
 
   pointer-events: none;
-
-  transition: opacity 1s;
-}
-
-:host([show]) {
-  opacity: 1;
-}
-
-:host(:not([show])) {
-  opacity: 0;
 }
 
 img {
   width: 10%;
-  height: 10%;
-
   animation: rotate 8s linear infinite;
 }