Add fetch more loader for email messages (#3618)

Add fetch more loader

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

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

@@ -1,12 +1,9 @@
-import { useInView } from 'react-intersection-observer';
-import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { useObjectRecordTable } from '@/object-record/hooks/useObjectRecordTable';
-import { StyledRow } from '@/object-record/record-table/components/RecordTableRow';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
-import { grayScale } from '@/ui/theme/constants/colors';
+import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
 
 type RecordTableBodyFetchMoreLoaderProps = {
   objectNamePlural: string;
@@ -29,30 +26,10 @@ export const RecordTableBodyFetchMoreLoader = ({
     [setRecordTableLastRowVisible],
   );
 
-  const { ref: tbodyRef } = useInView({
-    onChange: onLastRowVisible,
-  });
-
-  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)};
-  `;
-
   return (
-    <tbody ref={tbodyRef}>
-      {isFetchingMoreObjects && (
-        <StyledRow selected={false}>
-          <td colSpan={7}>
-            <StyledText>Loading more...</StyledText>
-          </td>
-          <td colSpan={7} />
-        </StyledRow>
-      )}
-    </tbody>
+    <FetchMoreLoader
+      loading={isFetchingMoreObjects}
+      onLastRowVisible={onLastRowVisible}
+    />
   );
 };