master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Prevent infinite scroll from loading previous playlist songs - Add refs to store current playlist and search query values - Fix stale closure issue in loadPage function - Ensure infinite scroll uses current playlist, not cached values - Fixes race condition when switching playlists and scrolling

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-06 10:39:51 +02:00
parent 535dc16d2c
commit 08de2afa0e
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/frontend/src/hooks/usePaginatedSongs.ts
View File

@ -23,6 +23,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
const loadingRef = useRef(false); const loadingRef = useRef(false);
const currentPlaylistRef = useRef(playlistName); const currentPlaylistRef = useRef(playlistName);
const currentSearchQueryRef = useRef(searchQuery);
const abortControllerRef = useRef<AbortController | null>(null); const abortControllerRef = useRef<AbortController | null>(null);
// Cleanup function to prevent memory leaks // Cleanup function to prevent memory leaks
@ -38,8 +39,8 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
const loadPage = useCallback(async (page: number, search?: string, targetPlaylist?: string) => { const loadPage = useCallback(async (page: number, search?: string, targetPlaylist?: string) => {
if (loadingRef.current) return; if (loadingRef.current) return;
const searchToUse = search ?? searchQuery; const searchToUse = search ?? currentSearchQueryRef.current;
const playlistToUse = targetPlaylist ?? playlistName; const playlistToUse = targetPlaylist ?? currentPlaylistRef.current;
// Cleanup previous request // Cleanup previous request
cleanup(); cleanup();
@ -133,6 +134,15 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
}; };
}, []); }, []);
// Update refs when values change
useEffect(() => {
currentPlaylistRef.current = playlistName;
}, [playlistName]);
useEffect(() => {
currentSearchQueryRef.current = searchQuery;
}, [searchQuery]);
// Handle playlist changes // Handle playlist changes
useEffect(() => { useEffect(() => {
if (currentPlaylistRef.current !== playlistName) { if (currentPlaylistRef.current !== playlistName) {