From 510b92f669f4a5464b6cd9bdfaba0367ee4c0c89 Mon Sep 17 00:00:00 2001
From: michalcourson <mcourson@cusackmusic.com>
Date: Sat, 28 Feb 2026 17:28:49 -0500
Subject: [PATCH] wavesurfer lazy loading

---
 .../__pycache__/metadata.cpython-313.pyc      | Bin 7032 -> 7032 bytes
 .../__pycache__/recording.cpython-313.pyc     | Bin 3262 -> 3262 bytes
 .../__pycache__/settings.cpython-313.pyc      | Bin 2235 -> 2235 bytes
 .../src/renderer/components/AudioTrimer.tsx   |  38 +++++++++++++-----
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/audio-service/src/routes/__pycache__/metadata.cpython-313.pyc b/audio-service/src/routes/__pycache__/metadata.cpython-313.pyc
index fda7d27d269dcba93103ce4ba0f2f0d5813fb2c0..f9f2d296bca6cc4dd7807ac89b5e2300530476e0 100644
GIT binary patch
delta 20
acmexi_QQ<(GcPX}0}#ZeE#AnTD-8fiKL#oQ

delta 20
acmexi_QQ<(GcPX}0}!lqnYWQUR~i6HX9i9H

diff --git a/audio-service/src/routes/__pycache__/recording.cpython-313.pyc b/audio-service/src/routes/__pycache__/recording.cpython-313.pyc
index 435c7c253e52caaafea5e58bd59f9fb5145b5356..84216e312a04fb5337fb9cbda90f1c6a5e07b464 100644
GIT binary patch
delta 20
acmdldxlfY&GcPX}0}#ZeE#AnznFjzp3<a|Q

delta 20
acmdldxlfY&GcPX}0}!mSn75I8GY<eh0R_$g

diff --git a/audio-service/src/routes/__pycache__/settings.cpython-313.pyc b/audio-service/src/routes/__pycache__/settings.cpython-313.pyc
index d859b801edf950e3990800e12a71c3a61fb8ee1d..b6a5a6240b6f835a07f9a00924d411ab9ecb3740 100644
GIT binary patch
delta 20
acmdljxLc6>GcPX}0}#ZeE#Anzfdc?La0QkC

delta 20
acmdljxLc6>GcPX}0}y=OxL_mq1`Ys0L<V&L

diff --git a/electron-ui/src/renderer/components/AudioTrimer.tsx b/electron-ui/src/renderer/components/AudioTrimer.tsx
index 1c63530..5e5280d 100644
--- a/electron-ui/src/renderer/components/AudioTrimer.tsx
+++ b/electron-ui/src/renderer/components/AudioTrimer.tsx
@@ -44,6 +44,8 @@ export default function AudioTrimmer({
     useSortable({ id: metadata.filename });
 
   // Dialog state for editing name
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -202,25 +204,40 @@ export default function AudioTrimmer({
   }, [onRegionCreated, onRegionUpdated, plugins]);
 
   useEffect(() => {
-    let url: string | null = null;
+    const node = rootRef.current;
+    if (!node) return;
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      { threshold: 0.1 },
+    );
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    let cancelled = false;
     async function fetchAudio() {
-      //   console.log('Loading audio buffer for file:', filename);
       const buffer = await window.audio.loadAudioBuffer(metadata.filename);
-      // console.log('Received buffer:', buffer.buffer);
+      if (cancelled) return;
       if (buffer.buffer && !buffer.error) {
         const audioData = buffer.buffer
           ? new Uint8Array(buffer.buffer)
           : buffer;
-        url = URL.createObjectURL(new Blob([audioData]));
-        // console.log('Created blob URL:', url);
-        setBlobUrl(url);
+        wavesurfer?.loadBlob(new Blob([audioData]));
       }
     }
     fetchAudio();
     return () => {
-      if (url) URL.revokeObjectURL(url);
+      cancelled = true;
     };
-  }, [metadata.filename]);
+  }, [isVisible, metadata.filename, wavesurfer]);
 
   const onPlayPause = () => {
     if (wavesurfer === null) return;
@@ -245,7 +262,10 @@ export default function AudioTrimmer({
 
   return (
     <div
-      ref={setNodeRef}
+      ref={(el) => {
+        setNodeRef(el);
+        rootRef.current = el;
+      }}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,