fix infinite scroll on channel discovery page

ui/component/claimList/view.jsx

@@ -1,6 +1,5 @@
 // @flow
 import { MAIN_WRAPPER_CLASS } from 'component/app/view';
-import { MAIN_CLASS } from 'component/page/view';
 import type { Node } from 'react';
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
@@ -11,7 +10,6 @@ import usePersistedState from 'effects/use-persisted-state';
 
 const SORT_NEW = 'new';
 const SORT_OLD = 'old';
-const PADDING_ALLOWANCE = 100;
 
 type Props = {
   uris: Array<string>,
@@ -73,20 +71,16 @@ export default function ClaimList(props: Props) {
     function handleScroll(e) {
       if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
         const mainElWrapper = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
-        const main = document.querySelector(`.${MAIN_CLASS}`);
 
-        if (
-          mainElWrapper &&
-          main &&
-          (window.scrollY + window.innerHeight >= mainElWrapper.offsetHeight ||
-            mainElWrapper.offsetHeight - main.offsetHeight > PADDING_ALLOWANCE) &&
-          !loading &&
-          urisLength >= pageSize
-        ) {
-          onScrollBottom();
+        if (mainElWrapper && !loading && urisLength >= pageSize) {
+          const contentWrapperAtBottomOfPage = window.scrollY + window.innerHeight >= mainElWrapper.offsetHeight;
 
-          // Save that we've fetched this page to avoid weird stuff happening with fast scrolling
-          setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
+          if (contentWrapperAtBottomOfPage) {
+            onScrollBottom();
+
+            // Save that we've fetched this page to avoid weird stuff happening with fast scrolling
+            setScrollBottomCbMap({ ...scrollBottomCbMap, [page]: true });
+          }
         }
       }
     }

ui/component/claimListDiscover/view.jsx

@@ -54,7 +54,6 @@ type Props = {
   claimType?: string | Array<string>,
   renderProperties?: Claim => Node,
   includeSupportAction?: boolean,
-  noInfiniteScroll: boolean,
   hideBlock: boolean,
 };
 
@@ -82,7 +81,6 @@ function ClaimListDiscover(props: Props) {
     pageSize,
     renderProperties,
     includeSupportAction,
-    noInfiniteScroll,
     hideBlock,
   } = props;
   const didNavigateForward = history.action === 'PUSH';
@@ -232,7 +230,7 @@ function ClaimListDiscover(props: Props) {
   }
 
   function handleScrollBottom() {
-    if (!loading && !noInfiniteScroll) {
+    if (!loading) {
       setPage(page + 1);
     }
   }

ui/component/userChannelFollowIntro/view.jsx

@@ -22,14 +22,7 @@ function UserChannelFollowIntro(props: Props) {
         )}
       </p>
       <div className="section__body">
-        <ClaimListDiscover
-          defaultTypeSort={TYPE_TOP}
-          defaultTimeSort={TIME_ALL}
-          pageSize={99}
-          claimType="channel"
-          noInfiniteScroll
-          hideBlock
-        />
+        <ClaimListDiscover defaultTypeSort={TYPE_TOP} defaultTimeSort={TIME_ALL} claimType="channel" hideBlock />
         {followingCount > 0 && (
           <Nag
             type="helpful"