fix: don't pre-fetch sounds

This commit is contained in:
Maze Winther
2025-09-01 16:31:03 +02:00
parent 971f9d35d7
commit e2bd8d1e09
3 changed files with 77 additions and 93 deletions
@@ -1,13 +1,9 @@
"use client"; "use client";
import { useGlobalPrefetcher } from "@/components/providers/global-prefetcher";
export default function EditorLayout({ export default function EditorLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
useGlobalPrefetcher();
return <div>{children}</div>; return <div>{children}</div>;
} }
@@ -82,6 +82,14 @@ function SoundEffectsView() {
toggleSavedSound, toggleSavedSound,
showCommercialOnly, showCommercialOnly,
toggleCommercialFilter, toggleCommercialFilter,
hasLoaded,
setTopSoundEffects,
setLoading,
setError,
setHasLoaded,
setCurrentPage,
setHasNextPage,
setTotalCount,
} = useSoundsStore(); } = useSoundsStore();
const { const {
results: searchResults, results: searchResults,
@@ -106,6 +114,55 @@ function SoundEffectsView() {
useEffect(() => { useEffect(() => {
loadSavedSounds(); 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) { if (scrollAreaRef.current && scrollPosition > 0) {
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
scrollAreaRef.current?.scrollTo({ top: scrollPosition }); scrollAreaRef.current?.scrollTo({ top: scrollPosition });
@@ -113,7 +170,16 @@ function SoundEffectsView() {
return () => clearTimeout(timeoutId); return () => clearTimeout(timeoutId);
} }
}, []); }, [
hasLoaded,
setTopSoundEffects,
setLoading,
setError,
setHasLoaded,
setCurrentPage,
setHasNextPage,
setTotalCount,
]);
const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => { const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => {
const { scrollTop } = event.currentTarget; const { scrollTop } = event.currentTarget;
@@ -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,
]);
}