diff --git a/ui/component/claimTilesDiscover/index.js b/ui/component/claimTilesDiscover/index.js index a2adff264..ee9c28b72 100644 --- a/ui/component/claimTilesDiscover/index.js +++ b/ui/component/claimTilesDiscover/index.js @@ -73,7 +73,7 @@ function resolveSearchOptions(props) { const mutedAndBlockedChannelIds = Array.from( new Set((mutedUris || []).concat(blockedUris || []).map((uri) => splitBySeparator(uri)[1])) - ); + ).sort(); const urlParams = new URLSearchParams(location.search); const feeAmountInUrl = urlParams.get('fee_amount'); diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx index e67b5c234..aafd68c40 100644 --- a/ui/component/claimTilesDiscover/view.jsx +++ b/ui/component/claimTilesDiscover/view.jsx @@ -4,6 +4,7 @@ import React from 'react'; import { createNormalizedClaimSearchKey } from 'lbry-redux'; import ClaimPreviewTile from 'component/claimPreviewTile'; import useFetchViewCount from 'effects/use-fetch-view-count'; +import usePrevious from 'effects/use-previous'; type SearchOptions = { page_size: number, @@ -99,6 +100,7 @@ function ClaimTilesDiscover(props: Props) { const searchKey = createNormalizedClaimSearchKey(options); const fetchingClaimSearch = fetchingClaimSearchByQuery[searchKey]; const claimSearchUris = claimSearchByQuery[searchKey] || []; + const isUnfetchedClaimSearch = claimSearchByQuery[searchKey] === undefined; // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time const optionsStringForEffect = JSON.stringify(options); @@ -123,6 +125,8 @@ function ClaimTilesDiscover(props: Props) { uris.push(...Array(pageSize - uris.length).fill('')); } + const prevUris = usePrevious(uris); + useFetchViewCount(fetchViewCount, uris, claimsByUri, doFetchViewCount); // Run `doClaimSearch` @@ -133,10 +137,13 @@ function ClaimTilesDiscover(props: Props) { } }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]); + // Show previous results while we fetch to avoid blinkies and poor CLS. + const finalUris = isUnfetchedClaimSearch && prevUris ? prevUris : uris; + return (