From fa3443c05be8e6afe969e22f02b70ac690e608b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 24 May 2024 17:58:37 +0200 Subject: [PATCH] Improve autoload (#5566) Set a 1000px margin to start fetching more records before we hit the bottom of the page, makes the scrolling experience a lot smoother :) --- .../components/RecordTableBodyFetchMoreLoader.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) 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 196f5aae30f5..33173a925007 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,3 +1,4 @@ +import { useContext } from 'react'; import { useInView } from 'react-intersection-observer'; import styled from '@emotion/styled'; import { useRecoilCallback, useRecoilValue } from 'recoil'; @@ -6,6 +7,7 @@ import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useL import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; +import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper'; type RecordTableBodyFetchMoreLoaderProps = { objectNameSingular: string; @@ -38,8 +40,14 @@ export const RecordTableBodyFetchMoreLoader = ({ [setRecordTableLastRowVisible], ); + const scrollWrapperRef = useContext(ScrollWrapperContext); + const { ref: tbodyRef } = useInView({ onChange: onLastRowVisible, + rootMargin: '1000px', + root: scrollWrapperRef.current?.querySelector( + '[data-overlayscrollbars-viewport="scrollbarHidden"]', + ), }); return (