Add infinite scroll #30
Conversation
src/hooks/useInfiniteScroll.ts
Outdated
| */ | ||
| const useInfiniteScroll = (callback: () => void) => { | ||
| useEffect(() => { | ||
| const target = document.getElementById('skeleton'); |
There was a problem hiding this comment.
Could you refactor this to take in a ref instead, and make useInfiniteScroll generic to any scrollable container that can pass a ref into it?
There was a problem hiding this comment.
I did it that way initially, but I changed it because it made it much more complex to send the reference from the layout to the page, and because the scrollable area is always the same I left it that way.
But if you prefer, I can do it that way.
There was a problem hiding this comment.
The other thing I can do is to make the results table scrollable (but 100% height), so it is visually the same but I can control the scroll in the scope of the page
src/hooks/useInfiniteScroll.ts
Outdated
| const scrollHeight = target.scrollHeight; | ||
| const clientHeight = target.clientHeight; | ||
|
|
||
| if (scrollHeight - scrollTop <= clientHeight + DEFAULT_THRESHOLD) { |
There was a problem hiding this comment.
if it's called DEFAULT_THRESHOLD, then please also expose an optional threshold?: number arg that callers can override
2 participants
This PR introduces a useInfiniteScroll hook to trigger data loading when the user scrolls near the bottom of the page
related issue: #18