[ui] image loading spinner

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")}