From c626837d2f40fe7e9a86e712717cf3b5a9516465 Mon Sep 17 00:00:00 2001
From: Psami-wondah <okechukwusamuel16@gmail.com>
Date: Fri, 13 Dec 2024 08:43:11 +0100
Subject: [PATCH] fix: DX-2127 - Infite scroll doesn't always work for dataset
 table

---
 src/app/components/Table/Preview-table/index.tsx         | 9 ++++++---
 src/app/hooks/useInfinityScroll.ts                       | 5 +++--
 .../upload-module/component/table/data-table/index.tsx   | 2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/components/Table/Preview-table/index.tsx b/src/app/components/Table/Preview-table/index.tsx
index ae3b87526..c53762cb5 100644
--- a/src/app/components/Table/Preview-table/index.tsx
+++ b/src/app/components/Table/Preview-table/index.tsx
@@ -42,6 +42,8 @@ export default function PreviewTable(props: PreviewTableProps) {
   let dataStats: IdatasStats[] = [];
   let tableData: { [key: string]: number | string | null | boolean }[] = [];
 
+  const tableRef = React.useRef<HTMLDivElement>(null);
+
   if (props.columns.length > 0 && props.dataStats.length > 0) {
     if (props.columns.length < 5) {
       columns = [...props.columns, ...Array(5).fill("")];
@@ -97,7 +99,7 @@ export default function PreviewTable(props: PreviewTableProps) {
           }
         `}
       >
-        <Table css={previewTablecss}>
+        <Table innerRef={tableRef} css={previewTablecss}>
           <TableHead
             css={`
               top: 0;
@@ -213,12 +215,13 @@ export default function PreviewTable(props: PreviewTableProps) {
             ))}
           </TableBody>
         </Table>
-        <tr
+        <div
           ref={props.observerTarget}
           css={`
             height: 1px;
+            width: ${tableRef?.current?.clientWidth}px;
           `}
-        ></tr>
+        ></div>
         <div>{props.loading ? <CircleLoader /> : null}</div>
       </TableContainer>
 
diff --git a/src/app/hooks/useInfinityScroll.ts b/src/app/hooks/useInfinityScroll.ts
index 72d68170a..ef794dde8 100644
--- a/src/app/hooks/useInfinityScroll.ts
+++ b/src/app/hooks/useInfinityScroll.ts
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 export const useInfinityScroll = (
-  observerTarget: React.MutableRefObject<null>
+  observerTarget: React.MutableRefObject<null>,
+  threshold: number = 1
 ) => {
   const [isObserved, setIsObserved] = useState(false);
 
@@ -15,7 +16,7 @@ export const useInfinityScroll = (
           setIsObserved(false);
         }
       },
-      { threshold: 1 }
+      { threshold }
     );
 
     if (observerTarget.current) {
diff --git a/src/app/modules/dataset-module/routes/upload-module/component/table/data-table/index.tsx b/src/app/modules/dataset-module/routes/upload-module/component/table/data-table/index.tsx
index 5df68d602..b55b4df5a 100644
--- a/src/app/modules/dataset-module/routes/upload-module/component/table/data-table/index.tsx
+++ b/src/app/modules/dataset-module/routes/upload-module/component/table/data-table/index.tsx
@@ -37,7 +37,7 @@ export function DatasetDataTable(props: DataThemesDataTableProps) {
     { [key: string]: number | string | null | boolean }[]
   >([]);
   const observerTarget = React.useRef(null);
-  const { isObserved } = useInfinityScroll(observerTarget);
+  const { isObserved } = useInfinityScroll(observerTarget, 0);
 
   const {
     data: tableData,