diff --git a/frontend/src/Activity/Queue/Queue.tsx b/frontend/src/Activity/Queue/Queue.tsx index 720a2bc9c..8ee085568 100644 --- a/frontend/src/Activity/Queue/Queue.tsx +++ b/frontend/src/Activity/Queue/Queue.tsx @@ -63,7 +63,6 @@ function Queue() { totalRecords, error, isFetching, - isFetched, isLoading, page, goToPage, @@ -108,8 +107,10 @@ function Queue() { const isRefreshing = isLoading || isEpisodesFetching || isRefreshMonitoredDownloadsExecuting; + + // Use isLoading over isFetched to avoid losing the table UI when switching pages const isAllPopulated = - isFetched && + !isLoading && (isEpisodesPopulated || !records.length || records.every((e) => !e.episodeIds?.length)); diff --git a/frontend/src/Helpers/Hooks/usePagedApiQuery.ts b/frontend/src/Helpers/Hooks/usePagedApiQuery.ts index d0dfc9368..f25932ca2 100644 --- a/frontend/src/Helpers/Hooks/usePagedApiQuery.ts +++ b/frontend/src/Helpers/Hooks/usePagedApiQuery.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { keepPreviousData, useQuery } from '@tanstack/react-query'; import { useMemo } from 'react'; import { PropertyFilter } from 'App/State/AppState'; import { SortDirection } from 'Helpers/Props/sortDirections'; @@ -89,6 +89,7 @@ const usePagedApiQuery = (options: PagedQueryOptions) => { ), }; }, + placeholderData: keepPreviousData, }); return {