fix: (group) previews getting hung up on a spinner

webui/src/components/display/BlobPreview.svelte

@@ -15,18 +15,19 @@
   export let recurse = 3;
 
   $: ({ entity, entityInfo } = useEntity(address));
-  $: types = getTypes($entity, $entityInfo);
+  $: types = $entity && getTypes($entity, $entityInfo);
 
   $: handled =
-    !$entity ||
-    types.audio ||
-    types.video ||
-    types.image ||
-    types.text ||
-    types.model ||
-    types.web ||
-    types.fragment ||
-    (types.group && recurse > 0);
+    types &&
+    (!$entity ||
+      types.audio ||
+      types.video ||
+      types.image ||
+      types.text ||
+      types.model ||
+      types.web ||
+      types.fragment ||
+      (types.group && recurse > 0));
 
   $: dispatch("handled", handled);
 
@@ -73,17 +74,23 @@
               {address}
               recurse={recurse - 1}
               on:handled={(ev) => {
-                if (!ev.detail) failedChildren = [...failedChildren, address];
+                if (!ev.detail && !failedChildren.includes(address))
+                  failedChildren = [...failedChildren, address];
               }}
               on:loaded={(ev) => {
-                if (ev.detail) loadedChildren = [...loadedChildren, address];
+                if (ev.detail && !loadedChildren.includes(address))
+                  loadedChildren = [...loadedChildren, address];
               }}
             />
           </li>
         {/each}
       </ul>
     {:else if types.model}
-      <ModelViewer lookonly src="{API_URL}/raw/{address}" />
+      <ModelViewer
+        lookonly
+        src="{API_URL}/raw/{address}"
+        on:loaded={() => (loaded = address)}
+      />
     {:else if types.web}
       <img
         src={String($entity?.get("OG_IMAGE"))}
@@ -92,7 +99,11 @@
         on:error={() => (handled = false)}
       />
     {:else if types.fragment}
-      <FragmentViewer {address} detail={false} />
+      <FragmentViewer
+        {address}
+        detail={false}
+        on:loaded={() => (loaded = address)}
+      />
     {:else if types.audio}
       <div class="audiopreview image">
         <img
@@ -109,7 +120,11 @@
         {/if}
       </div>
     {:else if types.video}
-      <VideoViewer {address} detail={false} />
+      <VideoViewer
+        {address}
+        detail={false}
+        on:loaded={() => (loaded = address)}
+      />
     {:else}
       <div class="image" class:loaded={loaded == address || !handled}>
         <img

webui/src/components/display/BlobViewer.svelte

@@ -20,17 +20,18 @@
   let handled = false;
 
   $: ({ entity, entityInfo } = useEntity(address));
-  $: types = getTypes($entity, $entityInfo);
+  $: types = $entity && getTypes($entity, $entityInfo);
 
   $: handled =
-    types.audio ||
-    types.video ||
-    types.image ||
-    types.text ||
-    types.pdf ||
-    types.model ||
-    types.web ||
-    types.fragment;
+    types &&
+    (types.audio ||
+      types.video ||
+      types.image ||
+      types.text ||
+      types.pdf ||
+      types.model ||
+      types.web ||
+      types.fragment);
 
   $: dispatch("handled", handled);
 

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

@@ -5,12 +5,15 @@
   export let detail: boolean;
   import { xywh } from "../../../util/fragments/xywh";
   import { API_URL } from "../../../lib/api";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
 
   const { entity } = useEntity(address);
 
   $: objectAddress = String($entity?.get("ANNOTATES") || "");
 
   let imageLoaded = false;
+  $: imageLoaded && dispatch("loaded");
 </script>
 
 <div class="fragment-viewer">

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

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { createEventDispatcher, onMount } from "svelte";
+  const dispatch = createEventDispatcher();
+
   export let src: string;
   export let lookonly = false;
 
-  import { onMount } from "svelte";
   let root: HTMLElement;
 
   onMount(async () => {
@@ -65,6 +67,8 @@
       requestAnimationFrame(animate);
     }
     animate();
+
+    dispatch("loaded");
   });
 </script>
 

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

@@ -5,6 +5,8 @@
   import { API_URL } from "../../../lib/api";
   import { useEntity } from "../../../lib/entity";
   import { i18n } from "../../../i18n";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
 
   export let address: string;
   export let detail: boolean;
@@ -21,6 +23,8 @@
   let state = State.LOADING;
   let supported = true;
 
+  $: if (state == State.PREVIEW) dispatch("loaded");
+
   $: {
     if ($entity && videoEl) {
       const mime = $entity.get("FILE_MIME");