Implement table record virtualizer back (#2839)

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

front/src/modules/ui/object/record-table/components/RecordTableBody.tsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
 
@@ -12,6 +13,8 @@ import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { isFetchingRecordTableDataState } from '@/ui/object/record-table/states/isFetchingRecordTableDataState';
 import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
 import { getRecordTableScopedStates } from '@/ui/object/record-table/utils/getRecordTableScopedStates';
+import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import RenderIfVisible from '@/ui/utilities/virtualizer/RenderIfVisible';
 
 export const RecordTableBody = () => {
   const { scopeId } = useRecordTable();
@@ -41,36 +44,49 @@ export const RecordTableBody = () => {
   const isFetchingRecordTableData = useRecoilValue(
     isFetchingRecordTableDataState,
   );
+
   const lastRowId = tableRowIds[tableRowIds.length - 1];
 
+  const scrollWrapperRef = useContext(ScrollWrapperContext);
+
   if (isFetchingRecordTableData) {
     return <></>;
   }
 
   return (
-    <tbody>
+    <>
       {tableRowIds.map((rowId, rowIndex) => (
         <RowIdContext.Provider value={rowId} key={rowId}>
           <RowIndexContext.Provider value={rowIndex}>
-            <RecordTableRow
-              key={rowId}
-              ref={
-                rowId === lastRowId && rowIndex > 30
-                  ? lastTableRowRef
-                  : undefined
-              }
-              rowId={rowId}
-            />
+            <RenderIfVisible
+              rootElement="tbody"
+              placeholderElement="tr"
+              defaultHeight={32}
+              initialVisible={rowIndex < 30}
+              root={scrollWrapperRef.current}
+            >
+              <RecordTableRow
+                key={rowId}
+                ref={
+                  rowId === lastRowId && rowIndex > 30
+                    ? lastTableRowRef
+                    : undefined
+                }
+                rowId={rowId}
+              />
+            </RenderIfVisible>
           </RowIndexContext.Provider>
         </RowIdContext.Provider>
       ))}
-      {isFetchingMoreObjects && (
-        <StyledRow selected={false}>
-          <td style={{ height: 50 }} colSpan={1000}>
-            Loading more...
-          </td>
-        </StyledRow>
-      )}
-    </tbody>
+      <tbody>
+        {isFetchingMoreObjects && (
+          <StyledRow selected={false}>
+            <td style={{ height: 50 }} colSpan={1000}>
+              Loading more...
+            </td>
+          </StyledRow>
+        )}
+      </tbody>
+    </>
   );
 };