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

Fix grid with adnimation (#1584)

Browse source
This commit is contained in:
Raphael Wickihalder 2022-05-31 10:39:16 +08:00 committed by infinite-persistence
commit 9779c19e88
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 17 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
// @flow // @flow
import { MAIN_CLASS } from 'constants/classnames'; import { MAIN_CLASS } from 'constants/classnames';
import type { Node } from 'react'; import type { Node } from 'react';
import React, { useEffect, useState } from 'react'; import React, { useEffect } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import ClaimPreview from 'component/claimPreview'; import ClaimPreview from 'component/claimPreview';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
@ -107,7 +107,7 @@ export default function ClaimList(props: Props) {
} = props; } = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW); const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
const [uriBuffer, setUriBuffer] = useState([]); const uriBuffer = React.useRef([]);
// Resolve the index for injectedItem, if provided; else injectedIndex will be 'undefined'. // Resolve the index for injectedItem, if provided; else injectedIndex will be 'undefined'.
const listRef = React.useRef(); const listRef = React.useRef();
@ -207,19 +207,6 @@ export default function ClaimList(props: Props) {
/> />
); );
React.useEffect(() => {
tileUris.forEach((uri, index) => {
if (uri) {
const inj = getInjectedItem(index);
if (inj) {
if (uriBuffer.indexOf(index) === -1) {
setUriBuffer([index]);
}
}
}
});
}, [tileUris, injectedItem, lastVisibleIndex, pageSize]);
const getInjectedItem = (index) => { const getInjectedItem = (index) => {
if (injectedItem && injectedItem.node) { if (injectedItem && injectedItem.node) {
if (typeof injectedItem.node === 'function') { if (typeof injectedItem.node === 'function') {
@ -243,11 +230,16 @@ export default function ClaimList(props: Props) {
tileUris.map((uri, index) => { tileUris.map((uri, index) => {
if (uri) { if (uri) {
const inj = getInjectedItem(index); const inj = getInjectedItem(index);
if (inj) {
if (!uriBuffer.current.includes(index)) {
uriBuffer.current.push(index);
}
}
return ( return (
<React.Fragment key={uri}> <React.Fragment key={uri}>
{inj && inj} {inj && inj}
{(index < tileUris.length - uriBuffer.length || {(index < tileUris.length - uriBuffer.current.length ||
(pageSize && index < pageSize - uriBuffer.length)) && ( (pageSize && index < pageSize - uriBuffer.current.length)) && (
<ClaimPreviewTile <ClaimPreviewTile
uri={uri} uri={uri}
showHiddenByUser={showHiddenByUser} showHiddenByUser={showHiddenByUser}

24
ui/component/claimTilesDiscover/view.jsx
View file

@ -1,6 +1,6 @@
// @flow // @flow
import type { Node } from 'react'; import type { Node } from 'react';
import React, { useState } from 'react'; import React, { useRef } from 'react';
import Button from 'component/button'; import Button from 'component/button';
import ClaimPreviewTile from 'component/claimPreviewTile'; import ClaimPreviewTile from 'component/claimPreviewTile';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
@ -102,7 +102,7 @@ function ClaimTilesDiscover(props: Props) {
const claimSearchUris = claimSearchResults || []; const claimSearchUris = claimSearchResults || [];
const isUnfetchedClaimSearch = claimSearchResults === undefined; const isUnfetchedClaimSearch = claimSearchResults === undefined;
const resolvedPinUris = useResolvePins({ pins, claimsById, doResolveClaimIds, doResolveUris }); const resolvedPinUris = useResolvePins({ pins, claimsById, doResolveClaimIds, doResolveUris });
const [uriBuffer, setUriBuffer] = useState([]); const uriBuffer = useRef([]);
const timedOut = claimSearchResults === null; const timedOut = claimSearchResults === null;
const shouldPerformSearch = !fetchingClaimSearch && !timedOut && claimSearchUris.length === 0; const shouldPerformSearch = !fetchingClaimSearch && !timedOut && claimSearchUris.length === 0;
@ -175,19 +175,6 @@ function ClaimTilesDiscover(props: Props) {
} }
}, [doClaimSearch, shouldPerformSearch, optionsStringified]); }, [doClaimSearch, shouldPerformSearch, optionsStringified]);
React.useEffect(() => {
finalUris.forEach((uri, index) => {
if (uri) {
const inj = getInjectedItem(index);
if (inj) {
if (uriBuffer.indexOf(index) === -1) {
setUriBuffer([index]);
}
}
}
});
}, [finalUris, injectedItem, lastVisibleIndex, pageSize]);
// -------------------------------------------------------------------------- // --------------------------------------------------------------------------
// -------------------------------------------------------------------------- // --------------------------------------------------------------------------
@ -220,10 +207,15 @@ function ClaimTilesDiscover(props: Props) {
? finalUris.map((uri, i) => { ? finalUris.map((uri, i) => {
if (uri) { if (uri) {
const inj = getInjectedItem(i); const inj = getInjectedItem(i);
if (inj) {
if (!uriBuffer.current.includes(i)) {
uriBuffer.current.push(i);
}
}
return ( return (
<React.Fragment key={uri}> <React.Fragment key={uri}>
{inj && inj} {inj && inj}
{(i < finalUris.length - uriBuffer.length || i < pageSize - uriBuffer.length) && ( {(i < finalUris.length - uriBuffer.current.length || i < pageSize - uriBuffer.current.length) && (
<ClaimPreviewTile <ClaimPreviewTile
showNoSourceClaims={hasNoSource || showNoSourceClaims} showNoSourceClaims={hasNoSource || showNoSourceClaims}
uri={uri} uri={uri}