LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix infinite scroll on channel discovery page

Browse source
This commit is contained in:
Sean Yesmunt 2020-02-26 15:48:28 -05:00
parent cc94cb6745
commit cb89b05646
3 changed files with 10 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/component/claimList/view.jsx
View file

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

4
ui/component/claimListDiscover/view.jsx
View file

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

9
ui/component/userChannelFollowIntro/view.jsx
View file

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