fix: Improve media background image (#1635)

* fix: Improve media background image

* 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/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 irisLogo from '../images/camera-iris.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 { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import irisLogo from '../images/camera-iris-transparent.svg';
+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);
   }
 }