From d47718da8e32fba6cae60a35d0c870eb7eb52c4d Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Fri, 17 Sep 2021 11:22:39 +0800
Subject: [PATCH] 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.
---
 ui/component/claimTilesDiscover/view.jsx | 30 +++++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx
index 7d86f4256..4e95412b6 100644
--- a/ui/component/claimTilesDiscover/view.jsx
+++ b/ui/component/claimTilesDiscover/view.jsx
@@ -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) => (