diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx index 335f16d4156..91d1c3fda33 100644 --- a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx @@ -76,6 +76,7 @@ export const UsersV2 = () => { const { ref: projectRef } = useParams() const { project } = useProjectContext() const gridRef = useRef(null) + const xScroll = useRef(0) const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled() const [columns, setColumns] = useState[]>([]) @@ -109,6 +110,7 @@ export const UsersV2 = () => { isError, isFetchingNextPage, refetch, + hasNextPage, fetchNextPage, } = useUsersInfiniteQuery( { @@ -141,7 +143,18 @@ export const UsersV2 = () => { const selectedUserToDelete = users.find((u) => u.id === [...selectedUsers][0]) const handleScroll = (event: UIEvent) => { - if (isLoading || !isAtBottom(event)) return + const isScrollingHorizontally = xScroll.current !== event.currentTarget.scrollLeft + xScroll.current = event.currentTarget.scrollLeft + + if ( + isLoading || + isFetchingNextPage || + isScrollingHorizontally || + !isAtBottom(event) || + !hasNextPage + ) { + return + } fetchNextPage() } @@ -484,7 +497,6 @@ export const UsersV2 = () => { return ( { const user = users.find((u) => u.id === id) if (user) { diff --git a/apps/studio/data/auth/users-infinite-query.ts b/apps/studio/data/auth/users-infinite-query.ts index 8eef546f3a7..a5306cb2fdd 100644 --- a/apps/studio/data/auth/users-infinite-query.ts +++ b/apps/studio/data/auth/users-infinite-query.ts @@ -118,7 +118,7 @@ export const useUsersInfiniteQuery = ( enabled: enabled && typeof projectRef !== 'undefined' && isActive, getNextPageParam(lastPage, pages) { const page = pages.length - const hasNextPage = lastPage.result.length <= USERS_PAGE_LIMIT + const hasNextPage = lastPage.result.length >= USERS_PAGE_LIMIT if (!hasNextPage) return undefined return page },