ClaimTilesDiscover: fill with placeholder while waiting for claim_search

## Issue
Livestream claims are fetched seperately, so they might already exists. While claim_search is running, the list only consists of livestreams (collapsed).

## Fix
Fill up the space with placeholders to prevent layout shift.
This commit is contained in:
infinite-persistence 2021-09-17 11:22:39 +08:00
parent 6cfdff7eec
commit d47718da8e
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0

View file

@ -116,6 +116,12 @@ function ClaimTilesDiscover(props: Props) {
uris.splice(2, 0, ...pinUrls); uris.splice(2, 0, ...pinUrls);
} }
if (uris.length > 0 && uris.length < pageSize && shouldPerformSearch) {
// prefixUri and pinUrls might already be present while waiting for the
// remaining claim_search results. Fill the space to prevent layout shifts.
uris.push(...Array(pageSize - uris.length).fill(''));
}
// Run `doClaimSearch` // Run `doClaimSearch`
React.useEffect(() => { React.useEffect(() => {
if (shouldPerformSearch) { if (shouldPerformSearch) {
@ -130,7 +136,7 @@ function ClaimTilesDiscover(props: Props) {
const claimIds = []; const claimIds = [];
uris.forEach((uri) => { uris.forEach((uri) => {
if (claimsByUri[uri]) { if (uri && claimsByUri[uri]) {
claimIds.push(claimsByUri[uri].claim_id); claimIds.push(claimsByUri[uri].claim_id);
} }
}); });
@ -148,14 +154,20 @@ function ClaimTilesDiscover(props: Props) {
return ( return (
<ul className="claim-grid"> <ul className="claim-grid">
{uris && uris.length {uris && uris.length
? uris.map((uri) => ( ? uris.map((uri, i) => {
if (uri) {
return (
<ClaimPreviewTile <ClaimPreviewTile
showNoSourceClaims={hasNoSource || showNoSourceClaims} showNoSourceClaims={hasNoSource || showNoSourceClaims}
key={uri} key={uri}
uri={uri} uri={uri}
properties={renderProperties} properties={renderProperties}
/> />
)) );
} else {
return <ClaimPreviewTile showNoSourceClaims={hasNoSource || showNoSourceClaims} key={i} placeholder />;
}
})
: new Array(pageSize) : new Array(pageSize)
.fill(1) .fill(1)
.map((x, i) => ( .map((x, i) => (