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

Refactor infiniteScoll to use debouncing (#5999)

Browse Source 
Same as https://github.com/twentyhq/twenty/pull/5996 but with
useDebounced as asked in review
This commit is contained in:
Charles Bochet 2024-06-24 13:45:07 +02:00 committed by GitHub
parent 2e4ba9ca7b
commit 498e4ff6ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
View File

@ -1,5 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useDebouncedCallback } from 'use-debounce';
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable'; import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
@ -41,14 +42,20 @@ export const RecordTableBodyEffect = ({
} }
}, [records, totalCount, setRecordTableData, loading]); }, [records, totalCount, setRecordTableData, loading]);
useEffect(() => { const fetchMoreDebouncedIfRequested = useDebouncedCallback(async () => {
// We are adding a setTimeout here to give the user some room to scroll if they want to within this throttle window // We are debouncing here to give the user some room to scroll if they want to within this throttle window
setTimeout(async () => {
if (!isFetchingMoreObjects && tableLastRowVisible) {
await fetchMoreObjects(); await fetchMoreObjects();
}
}, 100); }, 100);
}, [fetchMoreObjects, isFetchingMoreObjects, tableLastRowVisible]);
useEffect(() => {
if (!isFetchingMoreObjects && tableLastRowVisible) {
fetchMoreDebouncedIfRequested();
}
}, [
fetchMoreDebouncedIfRequested,
isFetchingMoreObjects,
tableLastRowVisible,
]);
return <></>; return <></>;
}; };