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

Show-page: fix "no content found" flicker (#1546)

Browse source 
* Show-page: split out some effects

Break apart the large effect for easier tweaking, abiding by the 1-action-per-effect guideline.

This also fixes the dependency list. After checking with Haffa, the exclusion of `pathname` and `hash` from the list is probably to avoid hitting `doResolveUri`. This should no longer be an issue after the split, so no suppression needed.

* Show-page: fix "no content found" flicker

## Issue
1539: "Recently been seeing a flicker of "content not found" when direct loading content or channel links on mobile"

## Cause
`doResolveUri` can only be called after the initial mount (in the effect), so at first render, `isResolvingUri` won't be set yet, so we briefly ended up in the "no content found" path.

## Change
Factor out the logic that determines if we should send `doResolveUri`. This allows us to know that the upcoming effect will be sending `doResolveUri`, so we can hold off displaying "no content found".

* Show-page: don't delay the spinner when resolving

## Reason
The delay causes a blank page + footer, which looks bad.
This commit is contained in:
infinite-persistence 2022-05-24 18:39:21 +08:00 committed by GitHub
parent 2a0e802f10
commit ce9a1c128c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ui/page/show/view.jsx
View file

@ -102,6 +102,10 @@ export default function ShowPage(props: Props) {
blackListedOutpointMap[`${claim.txid}:${claim.nout}`]
);
const shouldResolveUri =
(doResolveUri && !isResolvingUri && uri && haventFetchedYet) ||
(claimExists && !claimIsPending && (!canonicalUrl || (isMine === undefined && isAuthenticated)));
useEffect(() => {
if (!canonicalUrl && isNewestPath) {
doResolveUri(uri);
@ -156,11 +160,10 @@ export default function ShowPage(props: Props) {
history.replaceState(history.state, '', windowHref.substring(0, windowHref.length - 1));
}
}
}, [canonicalUrl, pathname, hash, search]);
if (
(doResolveUri && !isResolvingUri && uri && haventFetchedYet) ||
(claimExists && !claimIsPending && (!canonicalUrl || (isMine === undefined && isAuthenticated)))
) {
useEffect(() => {
if (shouldResolveUri) {
doResolveUri(
uri,
false,
@ -168,19 +171,7 @@ export default function ShowPage(props: Props) {
isMine === undefined && isAuthenticated ? { include_is_my_output: true, include_purchase_receipt: true } : {}
);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
doResolveUri,
isResolvingUri,
canonicalUrl,
uri,
claimExists,
haventFetchedYet,
isMine,
claimIsPending,
search,
isAuthenticated,
]);
}, [shouldResolveUri, doResolveUri, uri, isMine, isAuthenticated]);
// Wait for latest claim fetch
if (isNewestPath && latestClaimUrl === undefined) {
@ -217,15 +208,16 @@ export default function ShowPage(props: Props) {
return (
<Page>
{(haventFetchedYet ||
shouldResolveUri || // covers the initial mount case where we haven't run doResolveUri, so 'isResolvingUri' is not true yet.
isResolvingUri ||
isResolvingCollection || // added for collection
(isCollection && !urlForCollectionZero)) && ( // added for collection - make sure we accept urls = []
<div className="main--empty">
<Spinner delayed />
<Spinner />
</div>
)}
{!isResolvingUri && !isSubscribed && (
{!isResolvingUri && !isSubscribed && !shouldResolveUri && (
<div className="main--empty">
<Yrbl
title={isChannel ? __('Channel Not Found') : __('No Content Found')}