Split back fetch more loader for record table and emails (#3693)

* Split back fetch more loader

* Rename loader

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

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

@@ -1,21 +1,33 @@
+import { useInView } from 'react-intersection-observer';
+import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
-import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
+import { grayScale } from '@/ui/theme/constants/colors';
 
 type RecordTableBodyFetchMoreLoaderProps = {
   objectNameSingular: string;
 };
 
+const StyledText = styled.div`
+  align-items: center;
+  box-shadow: none;
+  color: ${grayScale.gray40};
+  display: flex;
+  height: 32px;
+  margin-left: ${({ theme }) => theme.spacing(8)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const RecordTableBodyFetchMoreLoader = ({
   objectNameSingular,
 }: RecordTableBodyFetchMoreLoaderProps) => {
   const { queryStateIdentifier } = useLoadRecordIndexTable(objectNameSingular);
   const { setRecordTableLastRowVisible } = useRecordTable();
 
-  const isFetchingMoreObjects = useRecoilValue(
+  const isFetchingMoreRecords = useRecoilValue(
     isFetchingMoreRecordsFamilyState(queryStateIdentifier),
   );
 
@@ -26,10 +38,20 @@ export const RecordTableBodyFetchMoreLoader = ({
     [setRecordTableLastRowVisible],
   );
 
+  const { ref: tbodyRef } = useInView({
+    onChange: onLastRowVisible,
+  });
+
   return (
-    <FetchMoreLoader
-      loading={isFetchingMoreObjects}
-      onLastRowVisible={onLastRowVisible}
-    />
+    <tbody ref={tbodyRef}>
+      {isFetchingMoreRecords && (
+        <tr>
+          <td colSpan={7}>
+            <StyledText>Loading more...</StyledText>
+          </td>
+          <td colSpan={7} />
+        </tr>
+      )}
+    </tbody>
   );
 };