Skip to content

Commit

Permalink
Improve autoload (twentyhq#5566)
Browse files Browse the repository at this point in the history
Set a 1000px margin to start fetching more records before we hit the
bottom of the page, makes the scrolling experience a lot smoother :)
  • Loading branch information
FelixMalfait committed May 24, 2024
1 parent 9ad3fb9 commit fa3443c
Showing 1 changed file with 8 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useContext } from 'react';
import { useInView } from 'react-intersection-observer';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilValue } from 'recoil';
Expand All @@ -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;
Expand Down Expand Up @@ -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 (
Expand Down

0 comments on commit fa3443c

Please sign in to comment.