mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-08-27 07:23:31 +00:00
Inf-scroll: Remove history of whether we've serviced the bottom.
## Fixes: 4351: "Infinite load won't work if the same sort option clicked" Test case: 1. Click Following 2. Click New 3. Scroll down to load at least 1 extra page. 4. Go up and click New again. ## The Issue: `scrollBottomCbMap[page]` in this case did not reset since the `id` remained the same. ## The Fix: I don't know how else to notify the effect to run. Perhaps "when `page=1`" is one criteria, but I found that removing `scrollBottomCbMap` can also fix it. I don't know what scenario that `scrollBottomCbMap` was originally meant to handle, so will need to depend of reviewer to confirm I did not break something else. This fix assumes that recent inf-scroll fixes and debouncing would have addressed the "weird stuff happening with fast scrolling" problem mentioned in the comments.
This commit is contained in:
parent
9c7b882fbd
commit
defcda519e
1 changed files with 3 additions and 12 deletions
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import { MAIN_WRAPPER_CLASS } from 'component/app/view';
|
import { MAIN_WRAPPER_CLASS } from 'component/app/view';
|
||||||
import type { Node } from 'react';
|
import type { Node } from 'react';
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import ClaimPreview from 'component/claimPreview';
|
import ClaimPreview from 'component/claimPreview';
|
||||||
import Spinner from 'component/spinner';
|
import Spinner from 'component/spinner';
|
||||||
|
@ -50,7 +50,6 @@ export default function ClaimList(props: Props) {
|
||||||
onScrollBottom,
|
onScrollBottom,
|
||||||
pageSize,
|
pageSize,
|
||||||
page,
|
page,
|
||||||
id,
|
|
||||||
showHiddenByUser,
|
showHiddenByUser,
|
||||||
showUnresolvedClaims,
|
showUnresolvedClaims,
|
||||||
renderProperties,
|
renderProperties,
|
||||||
|
@ -60,7 +59,6 @@ export default function ClaimList(props: Props) {
|
||||||
timedOutMessage,
|
timedOutMessage,
|
||||||
isCardBody = false,
|
isCardBody = false,
|
||||||
} = props;
|
} = props;
|
||||||
const [scrollBottomCbMap, setScrollBottomCbMap] = useState({});
|
|
||||||
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
|
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
|
||||||
const timedOut = uris === null;
|
const timedOut = uris === null;
|
||||||
const urisLength = (uris && uris.length) || 0;
|
const urisLength = (uris && uris.length) || 0;
|
||||||
|
@ -70,13 +68,9 @@ export default function ClaimList(props: Props) {
|
||||||
setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
|
setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setScrollBottomCbMap({});
|
|
||||||
}, [id, setScrollBottomCbMap]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = debounce(e => {
|
const handleScroll = debounce(e => {
|
||||||
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
|
if (page && pageSize && onScrollBottom) {
|
||||||
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
|
const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
|
||||||
|
|
||||||
if (mainElWrapper && !loading && urisLength >= pageSize) {
|
if (mainElWrapper && !loading && urisLength >= pageSize) {
|
||||||
|
@ -84,9 +78,6 @@ export default function ClaimList(props: Props) {
|
||||||
|
|
||||||
if (contentWrapperAtBottomOfPage) {
|
if (contentWrapperAtBottomOfPage) {
|
||||||
onScrollBottom();
|
onScrollBottom();
|
||||||
|
|
||||||
// Save that we've fetched this page to avoid weird stuff happening with fast scrolling
|
|
||||||
setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -96,7 +87,7 @@ export default function ClaimList(props: Props) {
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener('scroll', handleScroll);
|
||||||
return () => window.removeEventListener('scroll', handleScroll);
|
return () => window.removeEventListener('scroll', handleScroll);
|
||||||
}
|
}
|
||||||
}, [loading, onScrollBottom, urisLength, pageSize, page, setScrollBottomCbMap]);
|
}, [loading, onScrollBottom, urisLength, pageSize, page]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
|
|
Loading…
Add table
Reference in a new issue