fix: video loading state in VideoViewer

webui/src/components/display/blobs/VideoViewer.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { debounce, throttle } from "lodash";
-  import Icon from "../../utils/Icon.svelte";
+  import { throttle } from "lodash";
   import Spinner from "../../utils/Spinner.svelte";
+  import Icon from "../../utils/Icon.svelte";
+
   export let address: string;
   export let detail: boolean;
 
@@ -12,7 +13,7 @@
     PLAYING = "playing",
     ERRORED = "errored",
   }
-  let state = State.PREVIEW;
+  let state = State.LOADING;
 
   let videoEl: HTMLVideoElement;
 
@@ -47,18 +48,17 @@
 </script>
 
 <div class="video-viewer {state}">
-  {#if state === State.LOADING}
-    <Spinner />
-
-    <img
-      class="thumb"
-      src="api/thumb/{address}"
-      alt={address}
-      on:load={() => (state = State.PREVIEW)}
-      on:error={() => (state = State.ERRORED)}
-    />
-  {:else}
-    <div class="player" style="--icon-size: {detail ? 100 : 32}px">
+  <div class="player" style="--icon-size: {detail ? 100 : 32}px">
+    {#if state === State.LOADING}
+      <Spinner />
+      <img
+        class="thumb"
+        src="api/thumb/{address}"
+        alt="Preview for {address}"
+        on:load={() => (state = State.PREVIEW)}
+        on:error={() => (state = State.ERRORED)}
+      />
+    {:else}
       <!-- svelte-ignore a11y-media-has-caption -->
       <video
         preload={detail ? "auto" : "metadata"}
@@ -70,13 +70,13 @@
         controls={state === State.PLAYING}
         bind:this={videoEl}
       />
-      <div class="play-icon">
-        <div class="icon">
-          <Icon plain name="play" />
-        </div>
+    {/if}
+    <div class="play-icon">
+      <div class="icon">
+        <Icon plain name="play" />
       </div>
     </div>
-  {/if}
+  </div>
 </div>
 
 <style lang="scss">
@@ -139,16 +139,10 @@
         filter: brightness(0.75);
       }
       .play-icon {
-        opacity: 1;
+        opacity: 0.8;
       }
     }
 
-    .loading img {
-      min-width: 640px;
-      min-height: 480px;
-      background: gray;
-    }
-
     &.previewing video {
       cursor: pointer;
     }