LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

ClaimTilesDiscover: pause visual update until new results are fetched

Browse source 
## 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).
This commit is contained in:
infinite-persistence 2021-05-27 15:50:03 +08:00 committed by Thomas Zarebczan
parent 67296716d7
commit 6043b6101b
1 changed files with 28 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ui/component/claimTilesDiscover/view.jsx
View file

@ -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 uris = (prefixUris || []).concat(claimSearchByQuery[claimSearchCacheQuery] || []);
const mainSearchKey = createNormalizedClaimSearchKey(options);
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;