fix: Show version number with card loading spinner (#1825)

- Closes #1818

**Why add this?**: A repeated pattern is that an issue is fixed in the
card, a new build is released and users will incorrectly believe it's
not yet fixed due to their browser caching the old code. This results in
wasting their time, and my time.

**But it's obnoxious!**: I'm pretty sensitive to this (hence adding
these messages!), so let me know how terrible you find it. You can
disable it with:

```yaml
performance:
  features:
    card_loading_indicator: false
```

src/scss/loading.scss

@@ -3,14 +3,26 @@
   height: intrinsic;
 
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 
   pointer-events: none;
+
+  background-color: var(--frigate-card-loading-background-color);
+  color: var(--frigate-card-loading-foreground-color);
+
+  transition: opacity 1.5s ease-in;
+  opacity: 1;
+}
+
+:host([loaded]) {
+  opacity: 0;
 }
 
 frigate-card-icon {
-  height: 50%;
+  margin-bottom: 20px;
+  height: 25%;
   width: auto;
   animation: rotate 8s linear infinite;
 }
@@ -23,3 +35,7 @@ frigate-card-icon {
     transform: rotate(360deg);
   }
 }
+
+span {
+  font-size: x-large;
+}

src/scss/themes/base.scss

@@ -124,4 +124,13 @@
 
   --frigate-card-timeline-divider-color: var(--frigate-card-divider-color);
   --frigate-card-timeline-target-bar-color: var(--frigate-card-active-color);
+
+  /*******************
+   * Loading Indicator
+   *******************/
+
+  --frigate-card-loading-background-color: var(
+    --frigate-card-control-background-transparent
+  );
+  --frigate-card-loading-foreground-color: var(--frigate-card-control-foreground);
 }