diff --git a/packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx
similarity index 84%
rename from packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx
rename to packages/twenty-front/src/modules/activities/emails/components/EmailThreadFetchMoreLoader.tsx
index fb45a2371..94f0b3902 100644
--- a/packages/twenty-front/src/modules/ui/utilities/loading-state/components/FetchMoreLoader.tsx
+++ b/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,
});
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
index e17909f75..1edc77b4d 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
+++ b/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 = ({
))}
)}
-
diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
index 13f8d8f2f..639f2cf99 100644
--- a/packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx
+++ b/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}
/>
))}
-
+
);
};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx
index 611dfc9fa..bbd4f9113 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyFetchMoreLoader.tsx
+++ b/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 (
-
+
+ {isFetchingMoreRecords && (
+
+ |
+ Loading more...
+ |
+ |
+
+ )}
+
);
};