Fix issue where next page loaded even when table wasn't scrolled (#6476)

- on table, scrollbar sits on top of the scrollable content, taking up no space.
- Fixed an issue where next page loaded even when table wasn't scrolled in some case.

Author: bilalabbad

.vale/styles/spelling-exceptions.txt

@@ -118,6 +118,8 @@ REST
 resources
 schema's
 schema_mapping
+scrollbar
+scrollable
 sdk
 subcommand
 subnet

changelog/infinite-scroll.fixed.md

@@ -0,0 +1,2 @@
+- on table, scrollbar sits on top of the scrollable content, taking up no space.
+- Fixed an issue where next page loaded even when table wasn't scrolled in some case.

frontend/app/src/entities/nodes/object/ui/object-table/object-table-skeleton.tsx

@@ -13,7 +13,7 @@ export function ObjectTableSkeleton({ headerCount }: ObjectsTableSkeletonProps)
       {[...Array(headerCount)].map((_, colIndex) => (
         <TableCell
           key={`skeleton-${rowIndex}-${colIndex}`}
-          className={classNames(colIndex === 0 && "sticky left-0")}
+          className={classNames(colIndex === 0 && "sticky left-0 bg-white z-1")}
         >
           <Skeleton className="h-4 w-full" />
         </TableCell>

frontend/app/src/entities/nodes/object/ui/object-table/object-table.tsx

@@ -3,7 +3,8 @@ import { getObjectActionsColumn } from "@/entities/nodes/object/ui/object-table/
 import { ObjectTableEmpty } from "@/entities/nodes/object/ui/object-table/object-table-empty";
 import { Permission } from "@/entities/permission/types";
 import { ModelSchema } from "@/entities/schema/types";
-import { InfiniteDataTable } from "@/shared/components/table/infinite-data-table";
+import { DataTable } from "@/shared/components/table/data-table";
+import { InfiniteScroll } from "@/shared/components/utils/infinite-scroll";
 import useFilters from "@/shared/hooks/useFilters";
 import React from "react";
 import { getObjectTableColumns } from "./get-object-table-columns";
@@ -15,25 +16,22 @@ export interface ObjectsTableProps {
 
 export const ObjectTable = ({ schema, permission }: ObjectsTableProps) => {
   const [filters] = useFilters();
-  const { isPending, data, fetchNextPage, hasNextPage, isFetchingNextPage } = useObjects({
-    schema,
-    filters,
-  });
+  const { isFetching, data, fetchNextPage, hasNextPage } = useObjects({ schema, filters });
 
   const columns = React.useMemo(() => {
     return [...getObjectTableColumns(schema), getObjectActionsColumn(permission)];
   }, [schema.hash]);
   const flatData = React.useMemo(() => data?.pages?.flat() ?? [], [data]);
 
   return (
-    <InfiniteDataTable
-      columns={columns}
-      data={flatData}
-      isLoading={isPending || isFetchingNextPage}
-      hasNextPage={hasNextPage}
-      fetchNextPage={fetchNextPage}
-      renderEmpty={() => <ObjectTableEmpty schema={schema} />}
-      data-testid="object-items"
-    />
+    <InfiniteScroll scrollX hasNextPage={hasNextPage} onLoadMore={fetchNextPage}>
+      <DataTable
+        columns={columns}
+        data={flatData}
+        isLoading={isFetching}
+        renderEmpty={() => <ObjectTableEmpty schema={schema} />}
+        data-testid="object-items"
+      />
+    </InfiniteScroll>
   );
 };

frontend/app/src/entities/nodes/relationships/ui/relationship-table/relationship-table.tsx

@@ -6,7 +6,8 @@ import {
 } from "@/entities/nodes/relationships/domain/get-object-relationships/get-object-relationships.query";
 import { getRelationshipActionsColumn } from "@/entities/nodes/relationships/ui/relationship-table/get-relationship-actions-column";
 import { PERMISSION_ALLOW_ALL } from "@/entities/permission/constants";
-import { InfiniteDataTable } from "@/shared/components/table/infinite-data-table";
+import { DataTable } from "@/shared/components/table/data-table";
+import { InfiniteScroll } from "@/shared/components/utils/infinite-scroll";
 import useFilters from "@/shared/hooks/useFilters";
 import React from "react";
 
@@ -20,15 +21,14 @@ export function RelationshipTable({
   ...props
 }: RelationshipTableProps) {
   const [filters] = useFilters();
-  const { data, isPending, isFetchingNextPage, fetchNextPage, hasNextPage } =
-    useObjectRelationships({
-      relationshipSchema,
-      parentId,
-      parentKind,
-      relationshipName,
-      filters,
-      ...props,
-    });
+  const { data, isFetching, fetchNextPage, hasNextPage } = useObjectRelationships({
+    relationshipSchema,
+    parentId,
+    parentKind,
+    relationshipName,
+    filters,
+    ...props,
+  });
 
   const flatData = React.useMemo(() => data?.pages?.flat() ?? [], [data]);
 
@@ -46,13 +46,13 @@ export function RelationshipTable({
   }, [relationshipSchema.hash, flatData.length]);
 
   return (
-    <InfiniteDataTable
-      columns={columns}
-      data={flatData}
-      isLoading={isPending || isFetchingNextPage}
-      renderEmpty={() => <ObjectTableEmpty schema={relationshipSchema} />}
-      hasNextPage={hasNextPage}
-      fetchNextPage={fetchNextPage}
-    />
+    <InfiniteScroll scrollX hasNextPage={hasNextPage} onLoadMore={fetchNextPage}>
+      <DataTable
+        columns={columns}
+        data={flatData}
+        isLoading={isFetching}
+        renderEmpty={() => <ObjectTableEmpty schema={relationshipSchema} />}
+      />
+    </InfiniteScroll>
   );
 }

frontend/app/src/pages/objects/layout.tsx

@@ -59,10 +59,8 @@ const ObjectPageLayout = () => {
             </>
           )}
 
-          <ResizablePanel>
-            <div className="overflow-auto h-full">
-              <Outlet />
-            </div>
+          <ResizablePanel className="h-full flex flex-col">
+            <Outlet />
           </ResizablePanel>
         </ResizablePanelGroup>
       </Content.Card>

frontend/app/src/shared/components/table/infinite-data-table.tsx renamed to frontend/app/src/shared/components/table/data-table.tsx

@@ -2,49 +2,27 @@ import { ObjectTableSkeleton } from "@/entities/nodes/object/ui/object-table/obj
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import React from "react";
 
-export interface InfiniteDataTableProps<T> extends React.HTMLAttributes<HTMLDivElement> {
+export interface DataTableProps<T> extends React.HTMLAttributes<HTMLDivElement> {
   columns: ColumnDef<T>[];
   data: Array<T>;
   isLoading?: boolean;
   renderEmpty?: () => React.ReactNode;
-  hasNextPage: boolean;
-  fetchNextPage: () => void;
 }
 
-export function InfiniteDataTable<T extends object>({
+export function DataTable<T extends object>({
   columns,
   data,
   isLoading,
   renderEmpty,
-  hasNextPage,
-  fetchNextPage,
   ...props
-}: InfiniteDataTableProps<T>) {
-  const tableContainerRef = React.useRef<HTMLTableElement>(null);
+}: DataTableProps<T>) {
   const table = useReactTable({
     columns,
     data,
     getCoreRowModel: getCoreRowModel(),
     manualSorting: true,
   });
 
-  const fetchMoreOnBottomReached = React.useCallback(
-    (containerRefElement?: HTMLDivElement | null) => {
-      if (containerRefElement) {
-        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-        //once the user has scrolled within 250px of the bottom of the table, fetch more data if we can
-        if (scrollHeight - scrollTop - clientHeight < 250 && !isLoading && hasNextPage) {
-          fetchNextPage();
-        }
-      }
-    },
-    [fetchNextPage, isLoading]
-  );
-
-  React.useEffect(() => {
-    fetchMoreOnBottomReached(tableContainerRef.current);
-  }, [fetchMoreOnBottomReached]);
-
   const allHeaders = table.getFlatHeaders();
   const allRows = table.getRowModel().rows;
   const style = React.useMemo<React.CSSProperties>(
@@ -55,13 +33,7 @@ export function InfiniteDataTable<T extends object>({
   );
 
   return (
-    <div
-      className="grid content-start overflow-auto"
-      style={style}
-      onScroll={(e) => fetchMoreOnBottomReached(e.currentTarget)}
-      ref={tableContainerRef}
-      {...props}
-    >
+    <div className="grid content-start" style={style} {...props}>
       {allHeaders.map((header) => {
         return flexRender(header.column.columnDef.header, {
           ...header.getContext(),

frontend/app/src/shared/components/ui/scroll-area.tsx

@@ -2,43 +2,54 @@ import { classNames } from "@/shared/utils/common";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React from "react";
 
-export const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-    scrollX?: boolean;
-    scrollY?: boolean;
-    scrollBarClassName?: string;
-  }
->(({ className, children, scrollX = false, scrollY = true, scrollBarClassName, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    scrollHideDelay={0}
-    className={classNames("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]" ref={ref}>
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    {scrollX && <ScrollBar orientation="horizontal" className={scrollBarClassName} />}
-    {scrollY && <ScrollBar orientation="vertical" className={scrollBarClassName} />}
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
+export interface ScrollAreaProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  scrollX?: boolean;
+  scrollY?: boolean;
+  scrollBarClassName?: string;
+  ref?: React.Ref<HTMLDivElement>;
+}
 
-export const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={classNames(
-      "flex touch-none select-none transition-colors bg-gray-50",
-      orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
-      orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-gray-200 hover:bg-gray-400" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
+export function ScrollArea({
+  className,
+  children,
+  scrollX = false,
+  scrollY = true,
+  scrollBarClassName,
+  ref,
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <ScrollAreaPrimitive.Root
+      scrollHideDelay={0}
+      className={classNames("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]" ref={ref}>
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      {scrollX && <ScrollBar orientation="horizontal" className={scrollBarClassName} />}
+      {scrollY && <ScrollBar orientation="vertical" className={scrollBarClassName} />}
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+export interface ScrollBarProps extends ScrollAreaPrimitive.ScrollAreaScrollbarProps {}
+
+export function ScrollBar({ className, orientation = "vertical", ...props }: ScrollBarProps) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      orientation={orientation}
+      className={classNames(
+        "flex touch-none select-none transition-colors bg-gray-50",
+        orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
+        orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-gray-200 hover:bg-gray-400" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}

frontend/app/src/shared/components/utils/infinite-scroll.tsx

@@ -1,5 +1,4 @@
-import { ScrollArea } from "@/shared/components/ui/scroll-area";
-import { ScrollAreaProps } from "@radix-ui/react-scroll-area";
+import { ScrollArea, ScrollAreaProps } from "@/shared/components/ui/scroll-area";
 import React from "react";
 
 export interface InfiniteScrollProps extends ScrollAreaProps {