Fix grid with adnimation (#1584)
This commit is contained in:
commit
9779c19e88
2 changed files with 17 additions and 33 deletions
|
@ -1,7 +1,7 @@
|
|||
// @flow
|
||||
import { MAIN_CLASS } from 'constants/classnames';
|
||||
import type { Node } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import ClaimPreview from 'component/claimPreview';
|
||||
import Spinner from 'component/spinner';
|
||||
|
@ -107,7 +107,7 @@ export default function ClaimList(props: Props) {
|
|||
} = props;
|
||||
|
||||
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'.
|
||||
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) => {
|
||||
if (injectedItem && injectedItem.node) {
|
||||
if (typeof injectedItem.node === 'function') {
|
||||
|
@ -243,11 +230,16 @@ export default function ClaimList(props: Props) {
|
|||
tileUris.map((uri, index) => {
|
||||
if (uri) {
|
||||
const inj = getInjectedItem(index);
|
||||
if (inj) {
|
||||
if (!uriBuffer.current.includes(index)) {
|
||||
uriBuffer.current.push(index);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<React.Fragment key={uri}>
|
||||
{inj && inj}
|
||||
{(index < tileUris.length - uriBuffer.length ||
|
||||
(pageSize && index < pageSize - uriBuffer.length)) && (
|
||||
{(index < tileUris.length - uriBuffer.current.length ||
|
||||
(pageSize && index < pageSize - uriBuffer.current.length)) && (
|
||||
<ClaimPreviewTile
|
||||
uri={uri}
|
||||
showHiddenByUser={showHiddenByUser}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
import type { Node } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import Button from 'component/button';
|
||||
import ClaimPreviewTile from 'component/claimPreviewTile';
|
||||
import I18nMessage from 'component/i18nMessage';
|
||||
|
@ -102,7 +102,7 @@ function ClaimTilesDiscover(props: Props) {
|
|||
const claimSearchUris = claimSearchResults || [];
|
||||
const isUnfetchedClaimSearch = claimSearchResults === undefined;
|
||||
const resolvedPinUris = useResolvePins({ pins, claimsById, doResolveClaimIds, doResolveUris });
|
||||
const [uriBuffer, setUriBuffer] = useState([]);
|
||||
const uriBuffer = useRef([]);
|
||||
|
||||
const timedOut = claimSearchResults === null;
|
||||
const shouldPerformSearch = !fetchingClaimSearch && !timedOut && claimSearchUris.length === 0;
|
||||
|
@ -175,19 +175,6 @@ function ClaimTilesDiscover(props: Props) {
|
|||
}
|
||||
}, [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) => {
|
||||
if (uri) {
|
||||
const inj = getInjectedItem(i);
|
||||
if (inj) {
|
||||
if (!uriBuffer.current.includes(i)) {
|
||||
uriBuffer.current.push(i);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<React.Fragment key={uri}>
|
||||
{inj && inj}
|
||||
{(i < finalUris.length - uriBuffer.length || i < pageSize - uriBuffer.length) && (
|
||||
{(i < finalUris.length - uriBuffer.current.length || i < pageSize - uriBuffer.current.length) && (
|
||||
<ClaimPreviewTile
|
||||
showNoSourceClaims={hasNoSource || showNoSourceClaims}
|
||||
uri={uri}
|
||||
|
|
Loading…
Reference in a new issue