Don't block entire router while fetching Categories

This is a follow up for 2b60fe95

## Issues
- Not every page needs the Category data, so only block for Category pages.
- `categoryPages.length` was rendered as a number while blocking for the fetch.

## Change
It's a chicken-and-egg thing because we don't know what the category path is, but fortunately categories and internal pages start with `/$/`, so we can make a reliable guess. The other internal pages would have matched the defined routes and would not reach this function.

ui/component/router/view.jsx

@@ -305,7 +305,6 @@ function AppRouter(props: Props) {
 
   return (
     <React.Suspense fallback={<LoadingBarOneOff />}>
-      {categoryPages.length && (
       <Switch>
         <Redirect
           from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING_MANAGE}`}
@@ -408,21 +407,12 @@ function AppRouter(props: Props) {
         <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
 
         {/* Below need to go at the end to make sure we don't match any of our pages first */}
-          <Route
-            path={`/$/${PAGES.LATEST}/:channelName`}
-            exact
-            render={() => <ShowPage uri={uri} latestContentPath />}
-          />
-          <Route
-            path={`/$/${PAGES.LIVE_NOW}/:channelName`}
-            exact
-            render={() => <ShowPage uri={uri} liveContentPath />}
-          />
+        <Route path={`/$/${PAGES.LATEST}/:channelName`} exact render={() => <ShowPage uri={uri} latestContentPath />} />
+        <Route path={`/$/${PAGES.LIVE_NOW}/:channelName`} exact render={() => <ShowPage uri={uri} liveContentPath />} />
         <Route path="/:claimName" exact render={() => <ShowPage uri={uri} />} />
         <Route path="/:claimName/:streamName" exact render={() => <ShowPage uri={uri} />} />
         <Route path="/*" component={FourOhFourPage} />
       </Switch>
-      )}
     </React.Suspense>
   );
 }

ui/page/show/index.js

@@ -13,7 +13,7 @@ import {
   makeSelectUrlsForCollectionId,
   makeSelectIsResolvingCollectionForId,
 } from 'redux/selectors/collections';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectHomepageFetched, selectUserVerifiedEmail } from 'redux/selectors/user';
 import { doResolveUri, doFetchLatestClaimForChannel } from 'redux/actions/claims';
 import { doBeginPublish } from 'redux/actions/publish';
 import { doOpenModal } from 'redux/actions/app';
@@ -60,6 +60,7 @@ const select = (state, props) => {
     isResolvingCollection: makeSelectIsResolvingCollectionForId(collectionId)(state),
     isAuthenticated: selectUserVerifiedEmail(state),
     geoRestriction: selectGeoRestrictionForUri(state, uri),
+    homepageFetched: selectHomepageFetched(state),
   };
 };
 

ui/page/show/view.jsx

@@ -38,6 +38,7 @@ type Props = {
   isResolvingCollection: boolean,
   isAuthenticated: boolean,
   geoRestriction: ?GeoRestriction,
+  homepageFetched: boolean,
   latestContentPath?: boolean,
   liveContentPath?: boolean,
   latestClaimUrl: ?string,
@@ -66,6 +67,7 @@ export default function ShowPage(props: Props) {
     isResolvingCollection,
     isAuthenticated,
     geoRestriction,
+    homepageFetched,
     latestContentPath,
     liveContentPath,
     latestClaimUrl,
@@ -205,6 +207,9 @@ export default function ShowPage(props: Props) {
   }
 
   if (!claim || !claim.name) {
+    const maybeIsCategoryPage = pathname.startsWith('/$/');
+    const waitingForCategory = maybeIsCategoryPage && !homepageFetched;
+
     return (
       <Page>
         {(haventFetchedYet ||
@@ -217,7 +222,7 @@ export default function ShowPage(props: Props) {
           </div>
         )}
 
-        {!isResolvingUri && !isSubscribed && !shouldResolveUri && (
+        {!isResolvingUri && !isSubscribed && !shouldResolveUri && !waitingForCategory && (
           <div className="main--empty">
             <Yrbl
               title={isChannel ? __('Channel Not Found') : __('No Content Found')}