From e2bd8d1e093715da6d5d09b6dcbac6b68262f6ad Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 1 Sep 2025 16:31:03 +0200
Subject: [PATCH] fix: don't pre-fetch sounds

---
 .../src/app/editor/[project_id]/layout.tsx    | 22 +++---
 .../editor/media-panel/views/sounds.tsx       | 70 ++++++++++++++++-
 .../components/providers/global-prefetcher.ts | 78 -------------------
 3 files changed, 77 insertions(+), 93 deletions(-)
 delete mode 100644 apps/web/src/components/providers/global-prefetcher.ts

diff --git a/apps/web/src/app/editor/[project_id]/layout.tsx b/apps/web/src/app/editor/[project_id]/layout.tsx
index 151f7f94..c37e78b7 100644
--- a/apps/web/src/app/editor/[project_id]/layout.tsx
+++ b/apps/web/src/app/editor/[project_id]/layout.tsx
@@ -1,13 +1,9 @@
-"use client";
-
-import { useGlobalPrefetcher } from "@/components/providers/global-prefetcher";
-
-export default function EditorLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  useGlobalPrefetcher();
-
-  return <div>{children}</div>;
-}
+"use client";
+
+export default function EditorLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div>{children}</div>;
+}
diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
index 303eb858..700eaea7 100644
--- a/apps/web/src/components/editor/media-panel/views/sounds.tsx
+++ b/apps/web/src/components/editor/media-panel/views/sounds.tsx
@@ -82,6 +82,14 @@ function SoundEffectsView() {
     toggleSavedSound,
     showCommercialOnly,
     toggleCommercialFilter,
+    hasLoaded,
+    setTopSoundEffects,
+    setLoading,
+    setError,
+    setHasLoaded,
+    setCurrentPage,
+    setHasNextPage,
+    setTotalCount,
   } = useSoundsStore();
   const {
     results: searchResults,
@@ -106,6 +114,55 @@ function SoundEffectsView() {
   useEffect(() => {
     loadSavedSounds();
 
+    if (!hasLoaded) {
+      let ignore = false;
+
+      const fetchTopSounds = async () => {
+        try {
+          if (!ignore) {
+            setLoading(true);
+            setError(null);
+          }
+
+          const response = await fetch(
+            "/api/sounds/search?page_size=50&sort=downloads"
+          );
+
+          if (!ignore) {
+            if (!response.ok) {
+              throw new Error(`Failed to fetch: ${response.status}`);
+            }
+
+            const data = await response.json();
+            setTopSoundEffects(data.results);
+            setHasLoaded(true);
+
+            setCurrentPage(1);
+            setHasNextPage(!!data.next);
+            setTotalCount(data.count);
+          }
+        } catch (error) {
+          if (!ignore) {
+            console.error("Failed to fetch top sounds:", error);
+            setError(
+              error instanceof Error ? error.message : "Failed to load sounds"
+            );
+          }
+        } finally {
+          if (!ignore) {
+            setLoading(false);
+          }
+        }
+      };
+
+      const timeoutId = setTimeout(fetchTopSounds, 100);
+
+      return () => {
+        clearTimeout(timeoutId);
+        ignore = true;
+      };
+    }
+
     if (scrollAreaRef.current && scrollPosition > 0) {
       const timeoutId = setTimeout(() => {
         scrollAreaRef.current?.scrollTo({ top: scrollPosition });
@@ -113,14 +170,23 @@ function SoundEffectsView() {
 
       return () => clearTimeout(timeoutId);
     }
-  }, []);
+  }, [
+    hasLoaded,
+    setTopSoundEffects,
+    setLoading,
+    setError,
+    setHasLoaded,
+    setCurrentPage,
+    setHasNextPage,
+    setTotalCount,
+  ]);
 
   const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => {
     const { scrollTop } = event.currentTarget;
     setScrollPosition(scrollTop);
     handleScroll(event);
   };
-  
+
   const displayedSounds = useMemo(() => {
     const sounds = searchQuery ? searchResults : topSoundEffects;
     return sounds;
diff --git a/apps/web/src/components/providers/global-prefetcher.ts b/apps/web/src/components/providers/global-prefetcher.ts
deleted file mode 100644
index 2d7c684c..00000000
--- a/apps/web/src/components/providers/global-prefetcher.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { useSoundsStore } from "@/stores/sounds-store";
-
-export function useGlobalPrefetcher() {
-  const {
-    hasLoaded,
-    setTopSoundEffects,
-    setLoading,
-    setError,
-    setHasLoaded,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-  } = useSoundsStore();
-
-  useEffect(() => {
-    if (hasLoaded) return;
-
-    let ignore = false;
-
-    const prefetchTopSounds = async () => {
-      try {
-        if (!ignore) {
-          setLoading(true);
-          setError(null);
-        }
-
-        const response = await fetch(
-          "/api/sounds/search?page_size=50&sort=downloads"
-        );
-
-        if (!ignore) {
-          if (!response.ok) {
-            throw new Error(`Failed to fetch: ${response.status}`);
-          }
-
-          const data = await response.json();
-          setTopSoundEffects(data.results);
-          setHasLoaded(true);
-
-          // Set pagination state for top sounds
-          setCurrentPage(1);
-          setHasNextPage(!!data.next);
-          setTotalCount(data.count);
-        }
-      } catch (error) {
-        if (!ignore) {
-          console.error("Failed to prefetch top sounds:", error);
-          setError(
-            error instanceof Error ? error.message : "Failed to load sounds"
-          );
-        }
-      } finally {
-        if (!ignore) {
-          setLoading(false);
-        }
-      }
-    };
-
-    const timeoutId = setTimeout(prefetchTopSounds, 100);
-
-    return () => {
-      clearTimeout(timeoutId);
-      ignore = true;
-    };
-  }, [
-    hasLoaded,
-    setTopSoundEffects,
-    setLoading,
-    setError,
-    setHasLoaded,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-  ]);
-}