From 2754c962a4cb4d2d9a4a07a79589e564a28dac06 Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Sun, 12 Jul 2020 14:28:41 +0800
Subject: [PATCH] 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                            | 1 +
 ui/component/claimListDiscover/index.js | 2 ++
 ui/component/claimListDiscover/view.jsx | 8 ++++----
 3 files changed, 7 insertions(+), 4 deletions(-)

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