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

Don't block entire router while fetching Categories

Browse source 
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.
This commit is contained in:
infinite-persistence 2022-06-02 12:50:55 +08:00
parent c677f69c60
commit f69097b488
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
3 changed files with 106 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
ui/component/router/view.jsx
View file

@ -305,124 +305,114 @@ function AppRouter(props: Props) {
return ( return (
<React.Suspense fallback={<LoadingBarOneOff />}> <React.Suspense fallback={<LoadingBarOneOff />}>
{categoryPages.length && ( <Switch>
<Switch> <Redirect
<Redirect from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING_MANAGE}`}
from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
to={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`} />
/> <Redirect from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING}`} to={`/$/${PAGES.CHANNELS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__CHANNELS_FOLLOWING}`} to={`/$/${PAGES.CHANNELS_FOLLOWING}`} /> <Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING}`} to={`/$/${PAGES.TAGS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING}`} to={`/$/${PAGES.TAGS_FOLLOWING}`} /> <Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} /> <Redirect from={`/$/${PAGES.DEPRECATED__PUBLISH}`} to={`/$/${PAGES.UPLOAD}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISH}`} to={`/$/${PAGES.UPLOAD}`} /> <Redirect from={`/$/${PAGES.DEPRECATED__PUBLISHED}`} to={`/$/${PAGES.UPLOADS}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISHED}`} to={`/$/${PAGES.UPLOADS}`} />
<Route path={`/`} exact component={HomePage} /> <Route path={`/`} exact component={HomePage} />
{(!wildWestDisabled || tagParams) && <Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />} {(!wildWestDisabled || tagParams) && <Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />}
{categoryPages} {categoryPages}
<Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} /> <Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} /> <Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} /> <Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} />
<Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} /> <Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} />
<Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} /> <Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} />
<Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} /> <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
<Route path={`/$/${PAGES.CODE_2257}`} exact component={Code2257Page} /> <Route path={`/$/${PAGES.CODE_2257}`} exact component={Code2257Page} />
<Route path={`/$/${PAGES.PRIVACY_POLICY}`} exact component={PrivacyPolicyPage} /> <Route path={`/$/${PAGES.PRIVACY_POLICY}`} exact component={PrivacyPolicyPage} />
<Route path={`/$/${PAGES.TOS}`} exact component={TOSPage} /> <Route path={`/$/${PAGES.TOS}`} exact component={TOSPage} />
<Route path={`/$/${PAGES.FYP}`} exact component={FypPage} /> <Route path={`/$/${PAGES.FYP}`} exact component={FypPage} />
<Route path={`/$/${PAGES.YOUTUBE_TOS}`} exact component={YouTubeTOSPage} /> <Route path={`/$/${PAGES.YOUTUBE_TOS}`} exact component={YouTubeTOSPage} />
<Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} /> <Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />
<Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} /> <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
<Route path={`/$/${PAGES.TOP}`} exact component={TopPage} /> <Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} /> <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
<Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} /> <Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
<Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} /> <Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
<Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} /> <Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} />
<Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} /> <Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} /> <PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} /> <PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} />
<PrivateRoute <PrivateRoute
{...props} {...props}
exact exact
path={`/$/${PAGES.CHANNELS_FOLLOWING}`} path={`/$/${PAGES.CHANNELS_FOLLOWING}`}
component={isAuthenticated || !IS_WEB ? ChannelsFollowingPage : DiscoverPage} component={isAuthenticated || !IS_WEB ? ChannelsFollowingPage : DiscoverPage}
/> />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} component={SettingsStripeCard} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} component={SettingsStripeCard} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} component={SettingsStripeAccount} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} component={SettingsStripeAccount} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_UPDATE_PWD}`} component={UpdatePasswordPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_UPDATE_PWD}`} component={UpdatePasswordPage} />
<PrivateRoute <PrivateRoute
{...props} {...props}
exact exact
path={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`} path={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
component={ChannelsFollowingDiscoverPage} component={ChannelsFollowingDiscoverPage}
/> />
<PrivateRoute <PrivateRoute
{...props} {...props}
exact exact
path={`/$/${PAGES.CHANNELS_FOLLOWING_MANAGE}`} path={`/$/${PAGES.CHANNELS_FOLLOWING_MANAGE}`}
component={ChannelsFollowingManage} component={ChannelsFollowingManage}
/> />
<PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} /> <PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} /> <PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
<PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} /> <PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} /> <PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} /> <PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} /> <PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} /> <PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} /> <PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} /> <PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} /> <PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LISTS}`} component={ListsPage} /> <PrivateRoute {...props} path={`/$/${PAGES.LISTS}`} component={ListsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.PLAYLISTS}`} component={PlaylistsPage} /> <PrivateRoute {...props} path={`/$/${PAGES.PLAYLISTS}`} component={PlaylistsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WATCH_HISTORY}`} component={WatchHistoryPage} /> <PrivateRoute {...props} path={`/$/${PAGES.WATCH_HISTORY}`} component={WatchHistoryPage} />
<PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} /> <PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} /> <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} /> <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} /> <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CURRENT}`} component={LivestreamCurrentPage} /> <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CURRENT}`} component={LivestreamCurrentPage} />
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} /> <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} /> <PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SEND}`} component={SendPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SEND}`} component={SendPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
<PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} /> <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} /> <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`} component={OwnComments} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`} component={OwnComments} />
<PrivateRoute {...props} path={`/$/${PAGES.ODYSEE_MEMBERSHIP}`} component={OdyseeMembershipPage} /> <PrivateRoute {...props} path={`/$/${PAGES.ODYSEE_MEMBERSHIP}`} component={OdyseeMembershipPage} />
<Route path={`/$/${PAGES.POPOUT}/:channelName/:streamName`} component={PopoutChatPage} /> <Route path={`/$/${PAGES.POPOUT}/:channelName/:streamName`} component={PopoutChatPage} />
<Route <Route
path={`/$/${PAGES.EMBED}/:claimName`} path={`/$/${PAGES.EMBED}/:claimName`}
exact exact
component={embedLatestPath ? () => <EmbedWrapperPage uri={uri} /> : EmbedWrapperPage} component={embedLatestPath ? () => <EmbedWrapperPage uri={uri} /> : EmbedWrapperPage}
/> />
<Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} /> <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 */} {/* Below need to go at the end to make sure we don't match any of our pages first */}
<Route <Route path={`/$/${PAGES.LATEST}/:channelName`} exact render={() => <ShowPage uri={uri} latestContentPath />} />
path={`/$/${PAGES.LATEST}/:channelName`} <Route path={`/$/${PAGES.LIVE_NOW}/:channelName`} exact render={() => <ShowPage uri={uri} liveContentPath />} />
exact <Route path="/:claimName" exact render={() => <ShowPage uri={uri} />} />
render={() => <ShowPage uri={uri} latestContentPath />} <Route path="/:claimName/:streamName" exact render={() => <ShowPage uri={uri} />} />
/> <Route path="/*" component={FourOhFourPage} />
<Route </Switch>
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> </React.Suspense>
); );
} }

3
ui/page/show/index.js
View file

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

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

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