fix(ui): simplify BlobPreview markup, improve loading state

webui/src/components/display/BlobPreview.svelte

@@ -50,11 +50,14 @@
     }
   }
 
-  let imageLoaded = null;
+  let loaded = null;
 </script>
 
 <div class="preview" bind:clientHeight>
   {#if handled}
+    {#if !loaded}
+      <Spinner centered="absolute" />
+    {/if}
     {#if types.group}
       <ul class="group">
         {#each groupChildren as address (address)}
@@ -72,29 +75,21 @@
     {:else if types.model}
       <ModelViewer lookonly src="{API_URL}/raw/{address}" />
     {:else if types.web}
-      {#if imageLoaded != address}
-        <Spinner />
-      {/if}
       <img
         src={String($entity?.get("OG_IMAGE"))}
         alt="OpenGraph image for {$entityInfo?.t == 'Url' && $entityInfo?.c}"
-        on:load={() => (imageLoaded = address)}
+        on:load={() => (loaded = address)}
         on:error={() => (handled = false)}
       />
     {:else if types.fragment}
       <FragmentViewer {address} detail={false} />
     {:else if types.audio}
       <div class="audiopreview image">
-        {#if handled && imageLoaded != address}
-          <div class="spinner">
-            <Spinner centered />
-          </div>
-        {/if}
         <img
           src="{API_URL}/thumb/{address}?mime=audio"
           alt="Thumbnail for {address}..."
           loading="lazy"
-          on:load={() => (imageLoaded = address)}
+          on:load={() => (loaded = address)}
           on:error={() => (handled = false)}
         />
         {#if mediaDuration}
@@ -106,19 +101,14 @@
     {:else if types.video}
       <VideoViewer {address} detail={false} />
     {:else}
-      <div class="image" class:loaded={imageLoaded == address || !handled}>
-        {#if handled && imageLoaded != address}
-          <div class="spinner">
-            <Spinner centered="absolute" />
-          </div>
-        {/if}
+      <div class="image" class:loaded={loaded == address || !handled}>
         <img
           src="{API_URL}/{types.mimeType?.includes('svg+xml')
             ? 'raw'
             : 'thumb'}/{address}?size=512&quality=75"
           alt="Thumbnail for {address}..."
           loading="lazy"
-          on:load={() => (imageLoaded = address)}
+          on:load={() => (loaded = address)}
           on:error={() => (handled = false)}
         />
       </div>
@@ -132,14 +122,10 @@
 
 <style lang="scss">
   .preview {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    max-height: 100%;
+    display: relative;
 
     flex-grow: 1;
-    min-height: 0;
+    min-height: 2em;
   }
 
   .hashbadge {
@@ -163,14 +149,6 @@
     }
   }
 
-  .spinner {
-    width: 100%;
-    height: 260px;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
   .audiopreview {
     position: relative;
 

webui/src/components/utils/Spinner.svelte

@@ -11,6 +11,9 @@
 </div>
 
 <style>
+  .spinner {
+    height: 1em;
+  }
   .spinner.centered {
     position: relative;
     left: 50%;