twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-27 22:32:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve autoload (#5566)

Browse Source 
Set a 1000px margin to start fetching more records before we hit the
bottom of the page, makes the scrolling experience a lot smoother :)
This commit is contained in:
Félix Malfait 2024-05-24 17:58:37 +02:00 committed by GitHub
parent 9ad3fb96b7
commit fa3443c05b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,4 @@
import { useContext } from 'react';
import { useInView } from 'react-intersection-observer'; import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue } from 'recoil'; 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 { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState'; import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale'; import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
import { ScrollWrapperContext } from '@/ui/utilities/scroll/components/ScrollWrapper';
type RecordTableBodyFetchMoreLoaderProps = { type RecordTableBodyFetchMoreLoaderProps = {
objectNameSingular: string; objectNameSingular: string;
@ -38,8 +40,14 @@ export const RecordTableBodyFetchMoreLoader = ({
[setRecordTableLastRowVisible], [setRecordTableLastRowVisible],
); );
const scrollWrapperRef = useContext(ScrollWrapperContext);
const { ref: tbodyRef } = useInView({ const { ref: tbodyRef } = useInView({
onChange: onLastRowVisible, onChange: onLastRowVisible,
rootMargin: '1000px',
root: scrollWrapperRef.current?.querySelector(
'[data-overlayscrollbars-viewport="scrollbarHidden"]',
),
}); });
return ( return (