From c6c824c05947255c56a2515f57b5444eb0d1ca9b Mon Sep 17 00:00:00 2001
From: Raphael Wickihalder <raphael.wickihalder@odysee.com>
Date: Sun, 29 May 2022 09:04:34 +0200
Subject: [PATCH] Fix grid with adnimation

---
 ui/component/claimList/view.jsx          | 11 +++++++++--
 ui/component/claimTilesDiscover/view.jsx | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index 50ed87f1f..6afdd6576 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -208,17 +208,23 @@ export default function ClaimList(props: Props) {
   );
 
   React.useEffect(() => {
+    refreshBuffer();
+  }, [tileUris, injectedItem, lastVisibleIndex, pageSize]);
+
+  function refreshBuffer() {
     tileUris.forEach((uri, index) => {
       if (uri) {
         const inj = getInjectedItem(index);
         if (inj) {
           if (uriBuffer.indexOf(index) === -1) {
-            setUriBuffer([index]);
+            let newUriBUffer = uriBuffer;
+            newUriBUffer.push(index);
+            setUriBuffer(newUriBUffer);
           }
         }
       }
     });
-  }, [tileUris, injectedItem, lastVisibleIndex, pageSize]);
+  }
 
   const getInjectedItem = (index) => {
     if (injectedItem && injectedItem.node) {
@@ -243,6 +249,7 @@ export default function ClaimList(props: Props) {
           tileUris.map((uri, index) => {
             if (uri) {
               const inj = getInjectedItem(index);
+              if (inj) refreshBuffer();
               return (
                 <React.Fragment key={uri}>
                   {inj && inj}
diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx
index 2c4a6fdb7..f45df61ee 100644
--- a/ui/component/claimTilesDiscover/view.jsx
+++ b/ui/component/claimTilesDiscover/view.jsx
@@ -176,17 +176,23 @@ function ClaimTilesDiscover(props: Props) {
   }, [doClaimSearch, shouldPerformSearch, optionsStringified]);
 
   React.useEffect(() => {
+    refreshBuffer();
+  }, [finalUris, injectedItem, lastVisibleIndex, pageSize]);
+
+  function refreshBuffer() {
     finalUris.forEach((uri, index) => {
       if (uri) {
         const inj = getInjectedItem(index);
         if (inj) {
           if (uriBuffer.indexOf(index) === -1) {
-            setUriBuffer([index]);
+            let newUriBUffer = uriBuffer;
+            newUriBUffer.push(index);
+            setUriBuffer(newUriBUffer);
           }
         }
       }
     });
-  }, [finalUris, injectedItem, lastVisibleIndex, pageSize]);
+  }
 
   // --------------------------------------------------------------------------
   // --------------------------------------------------------------------------
@@ -220,6 +226,7 @@ function ClaimTilesDiscover(props: Props) {
         ? finalUris.map((uri, i) => {
             if (uri) {
               const inj = getInjectedItem(i);
+              if (inj) refreshBuffer();
               return (
                 <React.Fragment key={uri}>
                   {inj && inj}