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:
parent
6cfdff7eec
commit
d47718da8e
1 changed files with 21 additions and 9 deletions
|
@ -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) => {
|
||||||
<ClaimPreviewTile
|
if (uri) {
|
||||||
showNoSourceClaims={hasNoSource || showNoSourceClaims}
|
return (
|
||||||
key={uri}
|
<ClaimPreviewTile
|
||||||
uri={uri}
|
showNoSourceClaims={hasNoSource || showNoSourceClaims}
|
||||||
properties={renderProperties}
|
key={uri}
|
||||||
/>
|
uri={uri}
|
||||||
))
|
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) => (
|
||||||
|
|
Loading…
Reference in a new issue