4488 connect calendar tab to backend (#4624)

* create states and hooks

* implement fetch more records

* add empty state

* update types

* fix error

* add fetchmoreloader and add scroll to container

* fix visibility in calendarEventFragment

* fix fetchMoreRecords

* update TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE

* add test

* modify empty state subtitle

* replace entity by activityTargetableObject

* create useCustomResolver hook

* refactor

* refactoring

* use generic component

* rename FetchMoreLoader

* remove deprecated states and hooks

* fix typing

* update typing

* update error message

* renaming

* improve typing

* fix bug on contact creation from same company

packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx

@@ -0,0 +1,34 @@
+import { useInView } from 'react-intersection-observer';
+import styled from '@emotion/styled';
+
+import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
+
+type FetchMoreLoaderProps = {
+  loading: boolean;
+  onLastRowVisible: (...args: any[]) => any;
+};
+
+const StyledText = styled.div`
+  align-items: center;
+  box-shadow: none;
+  color: ${GRAY_SCALE.gray40};
+  display: flex;
+  height: 32px;
+  margin-left: ${({ theme }) => theme.spacing(8)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const FetchMoreLoader = ({
+  loading,
+  onLastRowVisible,
+}: FetchMoreLoaderProps) => {
+  const { ref: tbodyRef } = useInView({
+    onChange: onLastRowVisible,
+  });
+
+  return (
+    <div ref={tbodyRef}>
+      {loading && <StyledText>Loading more...</StyledText>}
+    </div>
+  );
+};