fix: resize AudioViewer

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

@@ -27,8 +27,6 @@
   let loaded = false;
 
   let wavesurfer: WaveSurfer;
-  // Trigger re-render by calling `drawBuffer()` on `detail` state change.
-  $: if (wavesurfer) wavesurfer.drawBuffer() && detail;
 
   // Zoom handling
   $: zoom = detail ? 1 : undefined;
@@ -137,6 +135,7 @@
     }
   }
 
+  let rootEl: HTMLElement;
   onMount(async () => {
     const WaveSurfer = await import("wavesurfer.js");
     const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
@@ -258,10 +257,16 @@
         wavesurfer.load(`${API_URL}/raw/${address}`);
       }
     }
+
+    const drawBufferThrottled = throttle(() => wavesurfer.drawBuffer(), 200);
+    const resizeObserver = new ResizeObserver((_entries) => {
+      drawBufferThrottled();
+    });
+    resizeObserver.observe(rootEl);
   });
 </script>
 
-<div class="audio" class:editable>
+<div class="audio" class:editable bind:this={rootEl}>
   {#if !loaded}
     <Spinner centered />
   {/if}