diff --git a/CHANGELOG.md b/CHANGELOG.md index fff559389..e1026b5f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,6 +43,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Fix "Refresh" on Publish page not showing the loading indicator when pressed _community pr!_ ([#4451](https://github.com/lbryio/lbry-desktop/pull/4451)) - Fix video duration not appearing on Mobile with enough width _community pr!_ ([#4452](https://github.com/lbryio/lbry-desktop/pull/4452)) - Fix video transcode setting not reflected correctly (MP3 incorrectly transcoded to MP4) _community pr!_ ([#4458](https://github.com/lbryio/lbry-desktop/pull/4458)) +- Fix scrolling glitch when results are exactly the page size _community pr!_ ([#4521](https://github.com/lbryio/lbry-desktop/pull/4521)) - Fix search results not appearing when scrolling due to long Tags or Following list in the navigation bar _community pr!_ ([#4465](https://github.com/lbryio/lbry-desktop/pull/4465)) - Fix unmuted state lost or reverted when playing a new video _community pr!_ ([#4483](https://github.com/lbryio/lbry-desktop/pull/4483)) diff --git a/ui/component/claimListDiscover/index.js b/ui/component/claimListDiscover/index.js index 0ccc9cba7..3f4f74c52 100644 --- a/ui/component/claimListDiscover/index.js +++ b/ui/component/claimListDiscover/index.js @@ -2,6 +2,7 @@ import { connect } from 'react-redux'; import { doClaimSearch, selectClaimSearchByQuery, + selectClaimSearchByQueryLastPageReached, selectFetchingClaimSearch, SETTINGS, selectFollowedTags, @@ -14,6 +15,7 @@ import ClaimListDiscover from './view'; const select = state => ({ followedTags: selectFollowedTags(state), claimSearchByQuery: selectClaimSearchByQuery(state), + claimSearchByQueryLastPageReached: selectClaimSearchByQueryLastPageReached(state), loading: selectFetchingClaimSearch(state), showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state), hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state), diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx index 97d8f6551..8f29a7a2b 100644 --- a/ui/component/claimListDiscover/view.jsx +++ b/ui/component/claimListDiscover/view.jsx @@ -31,6 +31,7 @@ type Props = { claimSearchByQuery: { [string]: Array, }, + claimSearchByQueryLastPageReached: { [string]: boolean }, hiddenUris: Array, hiddenNsfwMessage?: Node, channelIds?: Array, @@ -63,6 +64,7 @@ function ClaimListDiscover(props: Props) { const { doClaimSearch, claimSearchByQuery, + claimSearchByQueryLastPageReached, tags, defaultTags, loading, @@ -299,6 +301,7 @@ function ClaimListDiscover(props: Props) { const hasMatureTags = tagsParam && tagsParam.split(',').some(t => MATURE_TAGS.includes(t)); const claimSearchCacheQuery = createNormalizedClaimSearchKey(options); const claimSearchResult = claimSearchByQuery[claimSearchCacheQuery]; + const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[claimSearchCacheQuery]; const [prevOptions, setPrevOptions] = useState(null); @@ -470,10 +473,7 @@ function ClaimListDiscover(props: Props) { function handleScrollBottom() { if (!loading && infiniteScroll) { - if (claimSearchResult && claimSearchResult.length % CS.PAGE_SIZE === 0) { - // Only increment the page if the current page is full. A partially-filled page probably - // indicates "no more search results" (at least based on my testing). Gating this prevents - // incrementing the page when scrolling upwards. + if (claimSearchResult && !claimSearchResultLastPageReached) { setPage(page + 1); } }