diff --git a/src/renderer/features/now-playing/components/play-queue.tsx b/src/renderer/features/now-playing/components/play-queue.tsx index 3be248fc8..1558a1412 100644 --- a/src/renderer/features/now-playing/components/play-queue.tsx +++ b/src/renderer/features/now-playing/components/play-queue.tsx @@ -41,6 +41,7 @@ export const PlayQueue = forwardRef(({ listKey, sear const isFetching = useIsPlayerFetching(); const tableRef = useRef(null); + const previousSongCountRef = useRef(0); const mergedRef = useMergedRef(ref, tableRef); const { getQueue } = usePlayerActions(); const queueType = usePlayerQueueType(); @@ -49,6 +50,7 @@ export const PlayQueue = forwardRef(({ listKey, sear const [data, setData] = useState([]); const [groups, setGroups] = useState([]); + const [containerKey, setContainerKey] = useState(() => Math.random().toString(36)); useEffect(() => { const setQueue = () => { @@ -105,6 +107,17 @@ export const PlayQueue = forwardRef(({ listKey, sear }; }, [getQueue, queueType, tableRef]); + useEffect(() => { + const currentCount = data.length; + const previousCount = previousSongCountRef.current; + + if (previousCount === 0 && currentCount > 0) { + setContainerKey(Math.random().toString(36)); + } + + previousSongCountRef.current = currentCount; + }, [data.length]); + const filteredData: QueueSong[] = useMemo(() => { if (debouncedSearchTerm) { const searched = searchLibraryItems(data, debouncedSearchTerm, LibraryItem.SONG); @@ -128,7 +141,7 @@ export const PlayQueue = forwardRef(({ listKey, sear const currentSongUniqueId = currentSong?._uniqueId; return ( -
+