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

View File

@ -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>;
}

View File

@ -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;

View File

@ -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,
]);
}