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/scss/loading.scss

@@ -1,32 +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: 40%;
-  height: 40%;
-
-  opacity: 0.2;
-
-  filter: invert(100%);
-
+  width: 10%;
   animation: rotate 8s linear infinite;
 }
 

src/scss/media-background.scss

@@ -1,6 +1,10 @@
+$bg-img: url('../images/camera-iris-transparent.svg');
+
 :host {
+  background-color: var(--primary-background-color);
   background-position: center;
   background-repeat: no-repeat;
-  background-image: var(--frigate-card-media-background-image);
-  background-size: 25%;
+  background-image: $bg-img;
+  background-size: 10%;
+  background-position: center;
 }