Fix unnecessary requests in auth users (#33269)

* Fix unnecessary requests in auth users

* fix hasNextPage

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>

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<DataGridHandle>(null)
+  const xScroll = useRef<number>(0)
   const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
 
   const [columns, setColumns] = useState<Column<any>[]>([])
@@ -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<HTMLDivElement>) => {
-    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 (
                       <Row
                         {...props}
-                        key={props.row.id}
                         onClick={() => {
                           const user = users.find((u) => u.id === id)
                           if (user) {

apps/studio/data/auth/users-infinite-query.ts

@@ -118,7 +118,7 @@ export const useUsersInfiniteQuery = <TData = UsersData>(
       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
       },