Inf-scroll: Fix glitch when results are exactly the page size.

## Issue
Fixes 2675 `Claim search with exactly 20 results keep fetching next page`

## Changes
Use `claimSearchResultLastPageReached` (I didn't know it existed back then).

The unnecessary "loading" refresh will still happen one time, but at least now it doesn't happen every time we scroll to the bottom (and incorrectly incrementing 'page').

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))
 

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),

ui/component/claimListDiscover/view.jsx

@@ -31,6 +31,7 @@ type Props = {
   claimSearchByQuery: {
     [string]: Array<string>,
   },
+  claimSearchByQueryLastPageReached: { [string]: boolean },
   hiddenUris: Array<string>,
   hiddenNsfwMessage?: Node,
   channelIds?: Array<string>,
@@ -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);
       }
     }