ClaimTilesDiscover: pause visual update until new results are fetched

## Issue
GUI fix for 5979 `claim search runs twice sometimes and "refreshes" view`

The search query might encounter minor alterations after rendered (e.g. for the case of 5979, the `moderation.Blocklist` data came late). The code currently resets the result to 0 before initiating `claim_search`, so we see the GUI blink.

## Idea
There is a possibility that the query-change does not alter the final results in the end. Instead of reseting to the results to zero, hold on to the previous results until the fetch is done.

## Known issue
The tiles no longer blink if there is no change, but the "LIVE" indicator still does. I didn't want to propagate the info too deep, so leaving as is for now. It can be considered a feature ("blinking LIVE indicator" :))

## Results
- No blinking if results stay the same.
- Minimal tile-shifting if new ones are added or removed.
- In the current Odysee homepage, reduced React commits from 88 to 76 (save some CPU cycles).

ui/component/claimTilesDiscover/view.jsx

@@ -156,6 +156,8 @@ function ClaimTilesDiscover(props: Props) {
   const mutedAndBlockedChannelIds = Array.from(new Set(mutedUris.concat(blockedUris).map((uri) => uri.split('#')[1])));
   const liveUris = [];
 
+  const [prevUris, setPrevUris] = React.useState([]);
+
   const options: {
     page_size: number,
     no_totals: boolean,
@@ -229,10 +231,15 @@ function ClaimTilesDiscover(props: Props) {
     options.claim_ids = claimIds;
   }
 
-  const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
+  const mainSearchKey = createNormalizedClaimSearchKey(options);
-  const uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []);
+  const livestreamSearchKey = liveLivestreamsFirst
+    ? createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options))
+    : undefined;
+
+  let uris = (prefixUris || []).concat(claimSearchByQuery[mainSearchKey] || []);
+
+  const isLoading = fetchingClaimSearchByQuery[mainSearchKey];
 
-  const isLoading = fetchingClaimSearchByQuery[claimSearchCacheQuery];
   if (liveLivestreamsFirst && livestreamMap) {
     prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, options);
   }
@@ -241,6 +248,18 @@ function ClaimTilesDiscover(props: Props) {
   const optionsStringForEffect = JSON.stringify(options);
   const shouldPerformSearch = !isLoading && uris.length === 0;
 
+  if (
+    prefixUris === undefined &&
+    (claimSearchByQuery[mainSearchKey] === undefined ||
+      (livestreamSearchKey && claimSearchByQuery[livestreamSearchKey] === undefined))
+  ) {
+    // This is a new query and we don't have results yet ...
+    if (prevUris.length !== 0) {
+      // ... but we have previous results. Use it until new results are here.
+      uris = prevUris;
+    }
+  }
+
   React.useEffect(() => {
     if (shouldPerformSearch) {
       const searchOptions = JSON.parse(optionsStringForEffect);
@@ -252,6 +271,12 @@ function ClaimTilesDiscover(props: Props) {
     }
   }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, liveLivestreamsFirst]);
 
+  React.useEffect(() => {
+    if (JSON.stringify(prevUris) !== JSON.stringify(uris) && !shouldPerformSearch) {
+      setPrevUris(uris);
+    }
+  }, [shouldPerformSearch, prevUris, uris]);
+
   const resolveLive = (index) => {
     if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
       return true;