From 48837712de3e1354507f1a17174dd19ee87bb219 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 3 Feb 2022 17:04:50 +0100
Subject: [PATCH] [ui] spinner for video while waiting for poster to load

---
 .../src/components/display/BlobPreview.svelte | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index 0fa383e..a2be168 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -34,13 +34,24 @@
       <audio controls preload="auto" src="/api/raw/{address}" />
     {/if}
     {#if video}
-      <!-- svelte-ignore a11y-media-has-caption -->
-      <video
-        controls
-        preload="auto"
-        src="/api/raw/{address}"
-        poster="/api/thumb/{address}"
-      />
+      {#if imageLoaded != address }
+        <Spinner />
+
+        <img
+          src="/api/thumb/{address}"
+          alt={address}
+          on:load={() => (imageLoaded = address)}
+          on:error={() => (imageLoaded = address)}
+        />
+      {:else}
+        <!-- svelte-ignore a11y-media-has-caption -->
+        <video
+          controls
+          preload="auto"
+          src="/api/raw/{address}"
+          poster="/api/thumb/{address}"
+        />
+      {/if}
     {/if}
     {#if image}
       <a target="_blank" href="/api/raw/{address}?inline=1">