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/activities/emails/components/EmailThreadFetchMoreLoader.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { grayScale } from '@/ui/theme/constants/colors';
 
-type FetchMoreLoaderProps = {
+type EmailThreadFetchMoreLoaderProps = {
   loading: boolean;
   onLastRowVisible: (...args: any[]) => any;
 };
@@ -18,10 +18,10 @@ const StyledText = styled.div`
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const FetchMoreLoader = ({
+export const EmailThreadFetchMoreLoader = ({
   loading,
   onLastRowVisible,
-}: FetchMoreLoaderProps) => {
+}: EmailThreadFetchMoreLoaderProps) => {
   const { ref: tbodyRef } = useInView({
     onChange: onLastRowVisible,
   });

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@apollo/client';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
+import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
 import { TIMELINE_THREADS_DEFAULT_PAGE_SIZE } from '@/activities/emails/constants/messaging.constants';
 import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
@@ -21,7 +22,6 @@ import {
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
-import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
 import {
   GetTimelineThreadsFromPersonIdQueryVariables,
   TimelineThread,
@@ -146,7 +146,7 @@ export const EmailThreads = ({
             ))}
           </Card>
         )}
-        <FetchMoreLoader
+        <EmailThreadFetchMoreLoader
           loading={isFetchingMoreEmails}
           onLastRowVisible={fetchMoreRecords}
         />

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -2,13 +2,13 @@ import React, { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
+import { EmailThreadFetchMoreLoader } from '@/activities/emails/components/EmailThreadFetchMoreLoader';
 import { EmailThreadHeader } from '@/activities/emails/components/EmailThreadHeader';
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
 import { viewableEmailThreadState } from '@/activities/emails/state/viewableEmailThreadState';
 import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { FetchMoreLoader } from '@/ui/utilities/loading-state/components/FetchMoreLoader';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;
@@ -67,7 +67,10 @@ export const RightDrawerEmailThread = () => {
           sentAt={message.receivedAt}
         />
       ))}
-      <FetchMoreLoader loading={loading} onLastRowVisible={fetchMoreMessages} />
+      <EmailThreadFetchMoreLoader
+        loading={loading}
+        onLastRowVisible={fetchMoreMessages}
+      />
     </StyledContainer>
   );
 };

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>
   );
 };