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

* 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.

ui/page/show/view.jsx

@@ -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 (
+  useEffect(() => {
-      (doResolveUri && !isResolvingUri && uri && haventFetchedYet) ||
+    if (shouldResolveUri) {
-      (claimExists && !claimIsPending && (!canonicalUrl || (isMine === undefined && isAuthenticated)))
-    ) {
       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
+  }, [shouldResolveUri, doResolveUri, uri, isMine, isAuthenticated]);
-  }, [
-    doResolveUri,
-    isResolvingUri,
-    canonicalUrl,
-    uri,
-    claimExists,
-    haventFetchedYet,
-    isMine,
-    claimIsPending,
-    search,
-    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')}