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 11ac636b74
commit 7f73b51cb9
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);
}
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`
React.useEffect(() => {
if (shouldPerformSearch) {
@ -130,7 +136,7 @@ function ClaimTilesDiscover(props: Props) {
const claimIds = [];
uris.forEach((uri) => {
if (claimsByUri[uri]) {
if (uri && claimsByUri[uri]) {
claimIds.push(claimsByUri[uri].claim_id);
}
});
@ -148,14 +154,20 @@ function ClaimTilesDiscover(props: Props) {
return (
<ul className="claim-grid">
{uris && uris.length
? uris.map((uri) => (
<ClaimPreviewTile
showNoSourceClaims={hasNoSource || showNoSourceClaims}
key={uri}
uri={uri}
properties={renderProperties}
/>
))
? uris.map((uri, i) => {
if (uri) {
return (
<ClaimPreviewTile
showNoSourceClaims={hasNoSource || showNoSourceClaims}
key={uri}
uri={uri}
properties={renderProperties}
/>
);
} else {
return <ClaimPreviewTile showNoSourceClaims={hasNoSource || showNoSourceClaims} key={i} placeholder />;
}
})
: new Array(pageSize)
.fill(1)
.map((x, i) => (