Skip to content

Commit

Permalink
fix: infinite scroll bug on library page (#1483)
Browse files Browse the repository at this point in the history
  • Loading branch information
rpenido authored Nov 8, 2024
1 parent e59f284 commit 67faf9a
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion src/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,27 @@ export const useLoadOnScroll = (
) => {
useEffect(() => {
if (enabled) {
const canFetchNextPage = hasNextPage && !isFetchingNextPage;

const onscroll = () => {
// Verify the position of the scroll to implement an infinite scroll.
// Used `loadLimit` to fetch next page before reach the end of the screen.
const loadLimit = 300;
const scrolledTo = window.scrollY + window.innerHeight;
const scrollDiff = document.body.scrollHeight - scrolledTo;
const isNearToBottom = scrollDiff <= loadLimit;
if (isNearToBottom && hasNextPage && !isFetchingNextPage) {
if (isNearToBottom && canFetchNextPage) {
fetchNextPage();
}
};
window.addEventListener('scroll', onscroll);

// If the content is less than the screen height, fetch the next page.
const hasNoScroll = document.body.scrollHeight <= window.innerHeight;
if (hasNoScroll && canFetchNextPage) {
fetchNextPage();
}

return () => {
window.removeEventListener('scroll', onscroll);
};
Expand Down

0 comments on commit 67faf9a

Please sign in to comment.