diff --git a/ui/v2.5/src/components/List/ItemList.tsx b/ui/v2.5/src/components/List/ItemList.tsx index 8dd2d93b2..0efe3b03d 100644 --- a/ui/v2.5/src/components/List/ItemList.tsx +++ b/ui/v2.5/src/components/List/ItemList.tsx @@ -92,6 +92,9 @@ export const ItemList = ( onSelectNone, } = useListContext(); + // scroll to the top of the page when the page changes + useScrollToTopOnPageChange(filter.currentPage, result.loading); + const { modal, showModal, closeModal } = useModal(); const metadataByline = useMemo(() => { @@ -320,9 +323,6 @@ export const ItemListContext = ( view ); - // scroll to the top of the page when the page changes - useScrollToTopOnPageChange(filter.currentPage); - if (defaultFilterLoading) return null; return ( diff --git a/ui/v2.5/src/components/List/util.ts b/ui/v2.5/src/components/List/util.ts index 3b85b666d..280a65e75 100644 --- a/ui/v2.5/src/components/List/util.ts +++ b/ui/v2.5/src/components/List/util.ts @@ -338,9 +338,19 @@ export function useCachedQueryResult( return cachedResult; } -export function useScrollToTopOnPageChange(currentPage: number) { +export function useScrollToTopOnPageChange( + currentPage: number, + loading: boolean +) { + const prevPage = usePrevious(currentPage); + // scroll to the top of the page when the page changes + // only scroll to top if the page has changed and is not loading useEffect(() => { + if (loading || currentPage === prevPage || prevPage === undefined) { + return; + } + // if the current page has a detail-header, then // scroll up relative to that rather than 0, 0 const detailHeader = document.querySelector(".detail-header"); @@ -349,7 +359,7 @@ export function useScrollToTopOnPageChange(currentPage: number) { } else { window.scrollTo(0, 0); } - }, [currentPage]); + }, [prevPage, currentPage, loading]); } // handle case where page is more than there are pages