fix(datatable): fix infinite scroll (#141)

* fix: infinite scroll not triggering after data fetched

* fix: loading state and dependency

* chore: update package version

* chore: pr comment fix

* fix: changed ref logic

* chore: remove unwanted code

apps/www/examples/shield-ts/assets.tsx

@@ -114,7 +114,7 @@ export const Assets = () => {
   }, [isLoading, hasMoreData, page]);
 
   useEffect(() => {
-    setData(getData())
+    loadMoreData()
   }, [])
 
   return (

packages/raystack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/apsara",
-  "version": "0.18.6",
+  "version": "0.19.0",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "engines": {

packages/raystack/table/datatable.tsx

@@ -94,6 +94,37 @@ function DataTableRoot<TData, TValue>({
 
   const [tableState, setTableState] = useState<Partial<TableState>>({});
   const observerRef = useRef<IntersectionObserver | null>(null);
+  const lastRowRef = useRef<HTMLTableRowElement | null>(null);
+
+  useEffect(() => {
+    if (!onLoadMore) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && !isLoading) {
+        onLoadMore();
+      }
+    }, { threshold: 0.1 });
+
+    observerRef.current = observer;
+
+    return () => observer.disconnect();
+  }, [onLoadMore]);
+
+  useEffect(() => {
+    const observer = observerRef.current;
+    const lastRow = lastRowRef.current;
+
+    if (observer && lastRow) {
+      observer.disconnect();
+      observer.observe(lastRow);
+    }
+
+    return () => {
+      if (observer && lastRow) {
+        observer.unobserve(lastRow);
+      }
+    };
+  }, [isLoading]);
 
   const getLoader = (loaderRow: number, columns: ApsaraColumnDef<TData>[]) => (
     [...new Array(loaderRow)].map((_, rowIndex) => (
@@ -162,28 +193,6 @@ function DataTableRoot<TData, TValue>({
     state: tableState,
   });
 
-  const lastRowRef = useCallback(
-    (node: HTMLElement | null) => {
-      if (isLoading) return;
-      if (observerRef.current) observerRef.current.disconnect();
-
-      observerRef.current = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && onLoadMore) {
-          onLoadMore();
-        }
-      });
-
-      if (node) observerRef.current.observe(node);
-    },
-    [isLoading, onLoadMore]
-  );
-
-  useEffect(() => {
-    return () => {
-      if (observerRef.current) observerRef.current.disconnect();
-    };
-  }, []);
-
   const tableStyle = {
     ...(table.getRowModel().rows?.length
       ? { width: "100%" }
@@ -289,11 +298,12 @@ function DataTableRoot<TData, TValue>({
                     </Table.Row>
                   ))
                 ) : (
+                  !isLoading ?
                   <Table.Row>
                     <Table.Cell colSpan={columns.length}>
                       {emptyState || "No results."}
                     </Table.Cell>
-                  </Table.Row>
+                  </Table.Row> : <></>
                 )}
                 {isLoading && getLoader(loaderRow, columns)}
               </Table.Body>