fix: endless loading on group preview

webui/src/components/display/BlobPreview.svelte

@@ -30,7 +30,11 @@
 
   $: dispatch("handled", handled);
 
+  let loaded = null;
+  $: dispatch("loaded", Boolean(loaded));
+
   let failedChildren: string[] = [];
+  let loadedChildren: string[] = [];
   $: groupChildren = ($entity?.attr["HAS"] || [])
     .map((e) => String(e.value.c))
     .filter(
@@ -41,6 +45,9 @@
     )
     .slice(0, 4);
 
+  $: if (groupChildren)
+    loaded = groupChildren.every((addr) => loadedChildren.includes(addr));
+
   let clientHeight = 0;
   let mediaDuration = "";
   $: {
@@ -49,8 +56,6 @@
       mediaDuration = formatDuration(duration);
     }
   }
-
-  let loaded = null;
 </script>
 
 <div class="preview" bind:clientHeight>
@@ -68,6 +73,9 @@
               on:handled={(ev) => {
                 if (!ev.detail) failedChildren = [...failedChildren, address];
               }}
+              on:loaded={(ev) => {
+                if (ev.detail) loadedChildren = [...loadedChildren, address];
+              }}
             />
           </li>
         {/each}

webui/src/stories/BlobPreview.stories.ts

@@ -11,7 +11,11 @@ const meta: Meta<BlobPreview> = {
   title: "Blobs/BlobPreview",
   component: BlobPreview,
   tags: ["autodocs"],
-  argTypes: {},
+  argTypes: {
+    onLoaded: {
+      action: "loaded",
+    },
+  },
 };
 
 export default meta;
@@ -31,4 +35,4 @@ export const Video: Story = {
 
 export const VideoVertical: Story = {
   args: { address: videoVerticalAddress },
-};
+};