From 7134a7db52153eea3cccd8234f44695273c193b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 24 Jan 2022 18:09:07 +0100
Subject: [PATCH] [ui] image loading spinner

---
 webui/src/components/display/BlobPreview.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/webui/src/components/display/BlobPreview.svelte b/webui/src/components/display/BlobPreview.svelte
index 58a4b23..bb112d6 100644
--- a/webui/src/components/display/BlobPreview.svelte
+++ b/webui/src/components/display/BlobPreview.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { useEntity } from "../../lib/entity";
+  import Spinner from "../utils/Spinner.svelte";
   import ModelViewer from "./blobs/ModelViewer.svelte";
   import TextViewer from "./blobs/TextViewer.svelte";
   export let address: string;
@@ -12,6 +13,8 @@
     ["audio", "video", "image", "model", "text"].some((prefix) =>
       mimeType.startsWith(prefix)
     );
+
+  let imageLoaded = null;
 </script>
 
 {#if handled}
@@ -35,7 +38,14 @@
     {/if}
     {#if mimeType?.startsWith("image")}
       <a target="_blank" href="/api/raw/{address}">
-        <img src="/api/thumb/{address}" alt={address} />
+        {#if imageLoaded != address}
+          <Spinner />
+        {/if}
+        <img
+          src="/api/thumb/{address}"
+          alt={address}
+          on:load={() => (imageLoaded = address)}
+        />
       </a>
     {/if}
     {#if mimeType?.startsWith("model")}