diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx index 738e81a9d..ac3d58ee6 100644 --- a/ui/component/router/view.jsx +++ b/ui/component/router/view.jsx @@ -1,59 +1,63 @@ // @flow -import * as PAGES from 'constants/pages'; -import React, { useEffect } from 'react'; +import React, { useEffect, Suspense, lazy } from 'react'; import { Route, Redirect, Switch, withRouter } from 'react-router-dom'; -import SettingsPage from 'page/settings'; -import SettingsNotificationsPage from 'page/settingsNotifications'; -import SettingsAdvancedPage from 'page/settingsAdvanced'; -import HelpPage from 'page/help'; + // @if TARGET='app' import BackupPage from 'page/backup'; // @endif // @if TARGET='web' import Code2257Page from 'web/page/code2257'; // @endif -import ReportPage from 'page/report'; -import ShowPage from 'page/show'; -import PublishPage from 'page/publish'; -import DiscoverPage from 'page/discover'; -import HomePage from 'page/home'; -import InvitedPage from 'page/invited'; -import RewardsPage from 'page/rewards'; -import FileListPublished from 'page/fileListPublished'; -import InvitePage from 'page/invite'; -import SearchPage from 'page/search'; -import LibraryPage from 'page/library'; -import WalletPage from 'page/wallet'; -import TagsFollowingPage from 'page/tagsFollowing'; -import ChannelsFollowingPage from 'page/channelsFollowing'; -import ChannelsFollowingDiscoverPage from 'page/channelsFollowingDiscover'; -import TagsFollowingManagePage from 'page/tagsFollowingManage'; -import ListBlockedPage from 'page/listBlocked'; -import FourOhFourPage from 'page/fourOhFour'; -import SignInPage from 'page/signIn'; -import SignUpPage from 'page/signUp'; -import PasswordResetPage from 'page/passwordReset'; -import PasswordSetPage from 'page/passwordSet'; -import SignInVerifyPage from 'page/signInVerify'; -import ChannelsPage from 'page/channels'; -import LiveStreamPage from 'page/livestream'; -import EmbedWrapperPage from 'page/embedWrapper'; -import TopPage from 'page/top'; -import Welcome from 'page/welcome'; -import CreatorDashboard from 'page/creatorDashboard'; -import RewardsVerifyPage from 'page/rewardsVerify'; -import CheckoutPage from 'page/checkoutPage'; -import ChannelNew from 'page/channelNew'; -import RepostNew from 'page/repost'; -import BuyPage from 'page/buy'; -import NotificationsPage from 'page/notifications'; -import SignInWalletPasswordPage from 'page/signInWalletPassword'; -import YoutubeSyncPage from 'page/youtubeSync'; +// constants +import * as PAGES from 'constants/pages'; import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment'; import { parseURI, isURIValid } from 'lbry-redux'; import { SITE_TITLE, WELCOME_VERSION } from 'config'; +// Code Splitting +const BuyPage = lazy(() => import('page/buy')); +const ChannelsPage = lazy(() => import('page/channels')); +const ChannelsFollowingPage = lazy(() => import('page/channelsFollowing')); +const ChannelsFollowingDiscoverPage = lazy(() => import('page/channelsFollowingDiscover')); +const CreatorDashboard = lazy(() => import('page/creatorDashboard')); +const CheckoutPage = lazy(() => import('page/checkoutPage')); +const ChannelNew = lazy(() => import('page/channelNew')); +const DiscoverPage = lazy(() => import('page/discover')); +const EmbedWrapperPage = lazy(() => import('page/embedWrapper')); +const FileListPublished = lazy(() => import('page/fileListPublished')); +const FourOhFourPage = lazy(() => import('page/fourOhFour')); +const HelpPage = lazy(() => import('page/help')); +const HomePage = lazy(() => import('page/home')); +const InvitedPage = lazy(() => import('page/invited')); +const InvitePage = lazy(() => import('page/invite')); +const LiveStreamPage = lazy(() => import('page/livestream')); +const LibraryPage = lazy(() => import('page/library')); +const ListBlockedPage = lazy(() => import('page/listBlocked')); +const NotificationsPage = lazy(() => import('page/notifications')); +const PasswordResetPage = lazy(() => import('page/passwordReset')); +const PasswordSetPage = lazy(() => import('page/passwordSet')); +const PublishPage = lazy(() => import('page/publish')); +const RewardsPage = lazy(() => import('page/rewards')); +const RewardsVerifyPage = lazy(() => import('page/rewardsVerify')); +const ReportPage = lazy(() => import('page/report')); +const RepostNew = lazy(() => import('page/repost')); +const SignInPage = lazy(() => import('page/signIn')); +const SignUpPage = lazy(() => import('page/signUp')); +const SignInVerifyPage = lazy(() => import('page/signInVerify')); +const SearchPage = lazy(() => import('page/search')); +const SettingsPage = lazy(() => import('page/settings')); +const SettingsNotificationsPage = lazy(() => import('page/settingsNotifications')); +const SettingsAdvancedPage = lazy(() => import('page/settingsAdvanced')); +const SignInWalletPasswordPage = lazy(() => import('page/signInWalletPassword')); +const ShowPage = lazy(() => import('page/show')); +const TagsFollowingPage = lazy(() => import('page/tagsFollowing')); +const TagsFollowingManagePage = lazy(() => import('page/tagsFollowingManage')); +const TopPage = lazy(() => import('page/top')); +const WalletPage = lazy(() => import('page/wallet')); +const Welcome = lazy(() => import('page/welcome')); +const YoutubeSyncPage = lazy(() => import('page/youtubeSync')); + // Tell the browser we are handling scroll restoration if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; @@ -92,7 +96,12 @@ type PrivateRouteProps = Props & { }; function PrivateRoute(props: PrivateRouteProps) { - const { component: Component, isAuthenticated, ...rest } = props; + const { + component: Component, + isAuthenticated, + ...rest + } = props; + return ( - {/* @if TARGET='app' */} - {welcomeVersion < WELCOME_VERSION && } - {/* @endif */} - - - - - - - - - - {/* $FlowFixMe */} - {dynamicRoutes.map((dynamicRouteProps: RowDataItem) => ( - } + Loading...}> + + {/* @if TARGET='app' */} + {welcomeVersion < WELCOME_VERSION && } + {/* @endif */} + - ))} + + + + + - - - - - - + + + {/* $FlowFixMe */} + {dynamicRoutes.map((dynamicRouteProps: RowDataItem) => ( + } + /> + ))} - - {/* @if TARGET='app' */} - - {/* @endif */} - {/* @if TARGET='web' */} - - {/* @endif */} - - - - - - - + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + {/* @if TARGET='app' */} + + {/* @endif */} + {/* @if TARGET='web' */} + + {/* @endif */} + + + + + + + - - - {/* 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 */} + + + + + ); }