Improve autoload (#5566)

Set a 1000px margin to start fetching more records before we hit the
bottom of the page, makes the scrolling experience a lot smoother :)

Author: FelixMalfait

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx

@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
@@ -6,6 +7,7 @@ import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useL
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
 import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
+import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
 
 type RecordTableBodyFetchMoreLoaderProps = {
   objectNameSingular: string;
@@ -38,8 +40,14 @@ export const RecordTableBodyFetchMoreLoader = ({
     [setRecordTableLastRowVisible],
   );
 
+  const scrollWrapperRef = useContext(ScrollWrapperContext);
+
   const { ref: tbodyRef } = useInView({
     onChange: onLastRowVisible,
+    rootMargin: '1000px',
+    root: scrollWrapperRef.current?.querySelector(
+      '[data-overlayscrollbars-viewport="scrollbarHidden"]',
+    ),
   });
 
   return (