moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ScrollableList: use debounce, not throttle

This commit is contained in:
Alex Gleason 2022-06-02 20:36:49 -05:00
parent 509b7b871b
commit a4a20ddbe6
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/soapbox/components/scrollable_list.tsx
View File

@ -1,4 +1,4 @@
import { throttle } from 'lodash'; import { debounce } from 'lodash';
import React, { useEffect, useRef, useMemo, useCallback } from 'react'; import React, { useEffect, useRef, useMemo, useCallback } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso'; import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange, IndexLocationWithAlign } from 'react-virtuoso';
@ -106,7 +106,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
data.push(<Spinner />); data.push(<Spinner />);
} }
const handleScroll = useCallback(throttle(() => { const handleScroll = useCallback(debounce(() => {
// HACK: Virtuoso has no better way to get this... // HACK: Virtuoso has no better way to get this...
const node = document.querySelector(`[data-virtuoso-scroller] [data-item-index="${topIndex.current}"]`); const node = document.querySelector(`[data-virtuoso-scroller] [data-item-index="${topIndex.current}"]`);
if (node) { if (node) {