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

remove lazy import

Browse source
This commit is contained in:
zeppi 2021-10-18 22:31:23 -04:00 committed by jessopb
parent 3a77c7507b
commit fca18c26d3
8 changed files with 260 additions and 371 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
ui/component/app/view.jsx
View file

@ -1,7 +1,6 @@
// @flow // @flow
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import React, { useEffect, useRef, useState, useLayoutEffect } from 'react'; import React, { useEffect, useRef, useState, useLayoutEffect } from 'react';
import { lazyImport } from 'util/lazyImport';
import classnames from 'classnames'; import classnames from 'classnames';
import analytics from 'analytics'; import analytics from 'analytics';
import Router from 'component/router/index'; import Router from 'component/router/index';
@ -18,12 +17,12 @@ import useZoom from 'effects/use-zoom';
import useHistoryNav from 'effects/use-history-nav'; import useHistoryNav from 'effects/use-history-nav';
import LANGUAGE_MIGRATIONS from 'constants/language-migrations'; import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
const FileDrop = lazyImport(() => import('component/fileDrop' /* webpackChunkName: "secondary" */)); import FileDrop from 'component/fileDrop';
const ModalRouter = lazyImport(() => import('modal/modalRouter' /* webpackChunkName: "secondary" */)); import ModalRouter from 'modal/modalRouter';
const Nag = lazyImport(() => import('component/common/nag' /* webpackChunkName: "secondary" */)); import Nag from 'component/common/nag';
const SyncFatalError = lazyImport(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */)); import SyncFatalError from 'component/syncFatalError';
const Yrbl = lazyImport(() => import('component/yrbl' /* webpackChunkName: "yrbl" */)); import Yrbl from 'component/yrbl';
// **************************************************************************** // ****************************************************************************
@ -330,44 +329,32 @@ function App(props: Props) {
}, [sidebarOpen, isPersonalized, resolvedSubscriptions, subscriptions, resolveUris, setResolvedSubscriptions]); }, [sidebarOpen, isPersonalized, resolvedSubscriptions, subscriptions, resolveUris, setResolvedSubscriptions]);
if (syncFatalError) { if (syncFatalError) {
return ( return <SyncFatalError />;
<React.Suspense fallback={null}>
<SyncFatalError />
</React.Suspense>
);
} }
return ( return (
<div <div
className={classnames(MAIN_WRAPPER_CLASS, { className={classnames(MAIN_WRAPPER_CLASS, {
// @if TARGET='app'
[`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC, [`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC,
// @endif
[`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar, [`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
})} })}
ref={appRef} ref={appRef}
onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)} onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
> >
<Router /> <Router />
<React.Suspense fallback={null}> <ModalRouter />
<ModalRouter /> {renderFiledrop && <FileDrop />}
{renderFiledrop && <FileDrop />}
</React.Suspense>
<FileRenderFloating /> <FileRenderFloating />
<React.Suspense fallback={null}> {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
{isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
{/* @if TARGET='app' */} {showUpgradeButton && (
{showUpgradeButton && ( <Nag
<Nag message={__('An upgrade is available.')}
message={__('An upgrade is available.')} actionText={__('Install Now')}
actionText={__('Install Now')} onClick={requestDownloadUpgrade}
onClick={requestDownloadUpgrade} onClose={() => setUpgradeNagClosed(true)}
onClose={() => setUpgradeNagClosed(true)} />
/> )}
)}
{/* @endif */}
</React.Suspense>
</div> </div>
); );
} }

11
ui/component/claimPreview/view.jsx
View file

@ -3,7 +3,6 @@ import type { Node } from 'react';
import React, { useEffect, forwardRef } from 'react'; import React, { useEffect, forwardRef } from 'react';
import { NavLink, withRouter } from 'react-router-dom'; import { NavLink, withRouter } from 'react-router-dom';
import { isEmpty } from 'util/object'; import { isEmpty } from 'util/object';
import { lazyImport } from 'util/lazyImport';
import classnames from 'classnames'; import classnames from 'classnames';
import { isURIEqual, isURIValid } from 'util/lbryURI'; import { isURIEqual, isURIValid } from 'util/lbryURI';
import * as COLLECTIONS_CONSTS from 'constants/collections'; import * as COLLECTIONS_CONSTS from 'constants/collections';
@ -31,9 +30,7 @@ import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
import Button from 'component/button'; import Button from 'component/button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
const AbandonedChannelPreview = lazyImport(() => import AbandonedChannelPreview from 'component/abandonedChannelPreview';
import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
);
// preview images used on the landing page and on the channel page // preview images used on the landing page and on the channel page
type Props = { type Props = {
@ -326,11 +323,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
} }
if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && isChannelUri && claim === null) { if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && isChannelUri && claim === null) {
return ( return <AbandonedChannelPreview uri={uri} type />;
<React.Suspense fallback={null}>
<AbandonedChannelPreview uri={uri} type />
</React.Suspense>
);
} }
if (placeholder === 'publish' && !claim && uri.startsWith('lbry://@')) { if (placeholder === 'publish' && !claim && uri.startsWith('lbry://@')) {
return null; return null;

35
ui/component/fileRender/view.jsx
View file

@ -1,7 +1,6 @@
// @flow // @flow
import { remote } from 'electron'; import { remote } from 'electron';
import React from 'react'; import React from 'react';
import { lazyImport } from 'util/lazyImport';
import classnames from 'classnames'; import classnames from 'classnames';
import * as RENDER_MODES from 'constants/file_render_modes'; import * as RENDER_MODES from 'constants/file_render_modes';
import * as KEYCODES from 'constants/keycodes'; import * as KEYCODES from 'constants/keycodes';
@ -12,17 +11,15 @@ import analytics from 'analytics';
import DocumentViewer from 'component/viewers/documentViewer'; import DocumentViewer from 'component/viewers/documentViewer';
// @if TARGET='app'
// should match // should match
import DocxViewer from 'component/viewers/docxViewer'; import DocxViewer from 'component/viewers/docxViewer';
import ComicBookViewer from 'component/viewers/comicBookViewer'; import ComicBookViewer from 'component/viewers/comicBookViewer';
import ThreeViewer from 'component/viewers/threeViewer'; import ThreeViewer from 'component/viewers/threeViewer';
// @endif
const AppViewer = lazyImport(() => import('component/viewers/appViewer' /* webpackChunkName: "appViewer" */)); import AppViewer from 'component/viewers/appViewer';
const HtmlViewer = lazyImport(() => import('component/viewers/htmlViewer' /* webpackChunkName: "htmlViewer" */)); import HtmlViewer from 'component/viewers/htmlViewer';
const ImageViewer = lazyImport(() => import('component/viewers/imageViewer' /* webpackChunkName: "imageViewer" */)); import ImageViewer from 'component/viewers/imageViewer';
const PdfViewer = lazyImport(() => import('component/viewers/pdfViewer' /* webpackChunkName: "pdfViewer" */)); import PdfViewer from 'component/viewers/pdfViewer';
type Props = { type Props = {
uri: string, uri: string,
@ -96,17 +93,9 @@ class FileRender extends React.PureComponent<Props> {
/> />
); );
case RENDER_MODES.IMAGE: case RENDER_MODES.IMAGE:
return ( return <ImageViewer uri={uri} source={source} />;
<React.Suspense fallback={null}>
<ImageViewer uri={uri} source={source} />
</React.Suspense>
);
case RENDER_MODES.HTML: case RENDER_MODES.HTML:
return ( return <HtmlViewer source={downloadPath || source} />;
<React.Suspense fallback={null}>
<HtmlViewer source={downloadPath || source} />
</React.Suspense>
);
case RENDER_MODES.DOCUMENT: case RENDER_MODES.DOCUMENT:
case RENDER_MODES.MARKDOWN: case RENDER_MODES.MARKDOWN:
return ( return (
@ -126,11 +115,7 @@ class FileRender extends React.PureComponent<Props> {
case RENDER_MODES.DOCX: case RENDER_MODES.DOCX:
return <DocxViewer source={downloadPath} />; return <DocxViewer source={downloadPath} />;
case RENDER_MODES.PDF: case RENDER_MODES.PDF:
return ( return <PdfViewer source={downloadPath || source} />;
<React.Suspense fallback={null}>
<PdfViewer source={downloadPath || source} />
</React.Suspense>
);
case RENDER_MODES.CAD: case RENDER_MODES.CAD:
return ( return (
<ThreeViewer <ThreeViewer
@ -154,11 +139,7 @@ class FileRender extends React.PureComponent<Props> {
/> />
); );
case RENDER_MODES.APPLICATION: case RENDER_MODES.APPLICATION:
return ( return <AppViewer uri={uri} />;
<React.Suspense fallback={null}>
<AppViewer uri={uri} />
</React.Suspense>
);
} }
return null; return null;

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

@ -4,85 +4,75 @@ import { Route, Redirect, Switch, withRouter } from 'react-router-dom';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import { PAGE_TITLE } from 'constants/pageTitles'; import { PAGE_TITLE } from 'constants/pageTitles';
import { lazyImport } from 'util/lazyImport';
import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment'; import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
import { parseURI, isURIValid } from 'util/lbryURI'; import { parseURI, isURIValid } from 'util/lbryURI';
import { SITE_TITLE, WELCOME_VERSION } from 'config'; import { SITE_TITLE, WELCOME_VERSION } from 'config';
import LoadingBarOneOff from 'component/loadingBarOneOff';
import { GetLinksData } from 'util/buildHomepage'; import { GetLinksData } from 'util/buildHomepage';
import HomePage from 'page/home'; import HomePage from 'page/home';
import BackupPage from 'page/backup';
// @if TARGET='app'
const BackupPage = lazyImport(() => import('page/backup' /* webpackChunkName: "backup" */));
// @endif
// Chunk: "secondary" // Chunk: "secondary"
const SignInPage = lazyImport(() => import('page/signIn' /* webpackChunkName: "secondary" */)); import SignInPage from 'page/signIn';
const SignInWalletPasswordPage = lazyImport(() => import SignInWalletPasswordPage from 'page/signInWalletPassword';
import('page/signInWalletPassword' /* webpackChunkName: "secondary" */)
); import SignUpPage from 'page/signUp';
const SignUpPage = lazyImport(() => import('page/signUp' /* webpackChunkName: "secondary" */)); import SignInVerifyPage from 'page/signInVerify';
const SignInVerifyPage = lazyImport(() => import('page/signInVerify' /* webpackChunkName: "secondary" */));
// Chunk: "wallet/secondary" // Chunk: "wallet/secondary"
const BuyPage = lazyImport(() => import('page/buy' /* webpackChunkName: "secondary" */)); import BuyPage from 'page/buy';
const ReceivePage = lazyImport(() => import('page/receive' /* webpackChunkName: "secondary" */)); import ReceivePage from 'page/receive';
const SendPage = lazyImport(() => import('page/send' /* webpackChunkName: "secondary" */)); import SendPage from 'page/send';
const SwapPage = lazyImport(() => import('page/swap' /* webpackChunkName: "secondary" */)); import SwapPage from 'page/swap';
const WalletPage = lazyImport(() => import('page/wallet' /* webpackChunkName: "secondary" */)); import WalletPage from 'page/wallet';
// Chunk: none // Chunk: none
const NotificationsPage = lazyImport(() => import('page/notifications' /* webpackChunkName: "secondary" */)); import NotificationsPage from 'page/notifications';
const CollectionPage = lazyImport(() => import('page/collection' /* webpackChunkName: "secondary" */)); import CollectionPage from 'page/collection';
const ChannelNew = lazyImport(() => import('page/channelNew' /* webpackChunkName: "secondary" */)); import ChannelNew from 'page/channelNew';
const ChannelsFollowingDiscoverPage = lazyImport(() => import ChannelsFollowingDiscoverPage from 'page/channelsFollowingDiscover';
import('page/channelsFollowingDiscover' /* webpackChunkName: "secondary" */)
); import ChannelsFollowingPage from 'page/channelsFollowing';
const ChannelsFollowingPage = lazyImport(() => import('page/channelsFollowing' /* webpackChunkName: "secondary" */)); import ChannelsPage from 'page/channels';
const ChannelsPage = lazyImport(() => import('page/channels' /* webpackChunkName: "secondary" */)); import CheckoutPage from 'page/checkoutPage';
const CheckoutPage = lazyImport(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */)); import CreatorDashboard from 'page/creatorDashboard';
const CreatorDashboard = lazyImport(() => import('page/creatorDashboard' /* webpackChunkName: "secondary" */)); import DiscoverPage from 'page/discover';
const DiscoverPage = lazyImport(() => import('page/discover' /* webpackChunkName: "secondary" */)); import EmbedWrapperPage from 'page/embedWrapper';
const EmbedWrapperPage = lazyImport(() => import('page/embedWrapper' /* webpackChunkName: "secondary" */)); import FileListPublished from 'page/fileListPublished';
const FileListPublished = lazyImport(() => import('page/fileListPublished' /* webpackChunkName: "secondary" */)); import FourOhFourPage from 'page/fourOhFour';
const FourOhFourPage = lazyImport(() => import('page/fourOhFour' /* webpackChunkName: "fourOhFour" */)); import HelpPage from 'page/help';
const HelpPage = lazyImport(() => import('page/help' /* webpackChunkName: "help" */)); import InvitePage from 'page/invite';
const InvitePage = lazyImport(() => import('page/invite' /* webpackChunkName: "secondary" */)); import InvitedPage from 'page/invited';
const InvitedPage = lazyImport(() => import('page/invited' /* webpackChunkName: "secondary" */)); import LibraryPage from 'page/library';
const LibraryPage = lazyImport(() => import('page/library' /* webpackChunkName: "secondary" */)); import ListBlockedPage from 'page/listBlocked';
const ListBlockedPage = lazyImport(() => import('page/listBlocked' /* webpackChunkName: "secondary" */)); import ListsPage from 'page/lists';
const ListsPage = lazyImport(() => import('page/lists' /* webpackChunkName: "secondary" */)); import LiveStreamSetupPage from 'page/livestreamSetup';
const LiveStreamSetupPage = lazyImport(() => import('page/livestreamSetup' /* webpackChunkName: "secondary" */)); import LivestreamCurrentPage from 'page/livestreamCurrent';
const LivestreamCurrentPage = lazyImport(() => import('page/livestreamCurrent' /* webpackChunkName: "secondary" */)); import OwnComments from 'page/ownComments';
const OwnComments = lazyImport(() => import('page/ownComments' /* webpackChunkName: "ownComments" */)); import PasswordResetPage from 'page/passwordReset';
const PasswordResetPage = lazyImport(() => import('page/passwordReset' /* webpackChunkName: "secondary" */)); import PasswordSetPage from 'page/passwordSet';
const PasswordSetPage = lazyImport(() => import('page/passwordSet' /* webpackChunkName: "secondary" */)); import PublishPage from 'page/publish';
const PublishPage = lazyImport(() => import('page/publish' /* webpackChunkName: "secondary" */)); import ReportContentPage from 'page/reportContent';
const ReportContentPage = lazyImport(() => import('page/reportContent' /* webpackChunkName: "secondary" */)); import ReportPage from 'page/report';
const ReportPage = lazyImport(() => import('page/report' /* webpackChunkName: "secondary" */)); import RepostNew from 'page/repost';
const RepostNew = lazyImport(() => import('page/repost' /* webpackChunkName: "secondary" */)); import RewardsPage from 'page/rewards';
const RewardsPage = lazyImport(() => import('page/rewards' /* webpackChunkName: "secondary" */)); import RewardsVerifyPage from 'page/rewardsVerify';
const RewardsVerifyPage = lazyImport(() => import('page/rewardsVerify' /* webpackChunkName: "secondary" */)); import SearchPage from 'page/search';
const SearchPage = lazyImport(() => import('page/search' /* webpackChunkName: "secondary" */)); import SettingsStripeCard from 'page/settingsStripeCard';
const SettingsStripeCard = lazyImport(() => import('page/settingsStripeCard' /* webpackChunkName: "secondary" */)); import SettingsStripeAccount from 'page/settingsStripeAccount';
const SettingsStripeAccount = lazyImport(() =>
import('page/settingsStripeAccount' /* webpackChunkName: "secondary" */) import SettingsCreatorPage from 'page/settingsCreator';
); import SettingsNotificationsPage from 'page/settingsNotifications';
const SettingsCreatorPage = lazyImport(() => import('page/settingsCreator' /* webpackChunkName: "secondary" */));
const SettingsNotificationsPage = lazyImport(() => import SettingsPage from 'page/settings';
import('page/settingsNotifications' /* webpackChunkName: "secondary" */) import ShowPage from 'page/show';
); import TagsFollowingManagePage from 'page/tagsFollowingManage';
const SettingsPage = lazyImport(() => import('page/settings' /* webpackChunkName: "secondary" */));
const ShowPage = lazyImport(() => import('page/show' /* webpackChunkName: "secondary" */)); import TagsFollowingPage from 'page/tagsFollowing';
const TagsFollowingManagePage = lazyImport(() => import TopPage from 'page/top';
import('page/tagsFollowingManage' /* webpackChunkName: "secondary" */) import UpdatePasswordPage from 'page/passwordUpdate';
); import Welcome from 'page/welcome';
const TagsFollowingPage = lazyImport(() => import('page/tagsFollowing' /* webpackChunkName: "secondary" */)); import YoutubeSyncPage from 'page/youtubeSync';
const TopPage = lazyImport(() => import('page/top' /* webpackChunkName: "secondary" */));
const UpdatePasswordPage = lazyImport(() => import('page/passwordUpdate' /* webpackChunkName: "passwordUpdate" */));
const Welcome = lazyImport(() => import('page/welcome' /* webpackChunkName: "secondary" */));
const YoutubeSyncPage = lazyImport(() => import('page/youtubeSync' /* webpackChunkName: "secondary" */));
// Tell the browser we are handling scroll restoration // Tell the browser we are handling scroll restoration
if ('scrollRestoration' in history) { if ('scrollRestoration' in history) {
@ -237,105 +227,103 @@ function AppRouter(props: Props) {
} }
return ( return (
<React.Suspense fallback={<LoadingBarOneOff />}> <Switch>
<Switch> {/* @if TARGET='app' */}
{/* @if TARGET='app' */} {welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}
{welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />} {/* @endif */}
{/* @endif */} <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__TAGS_FOLLOWING}`} to={`/$/${PAGES.TAGS_FOLLOWING}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__TAGS_FOLLOWING_MANAGE}`} to={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISH}`} to={`/$/${PAGES.UPLOAD}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISHED}`} to={`/$/${PAGES.UPLOADS}`} />
<Route path={`/`} exact component={HomePage} />
<Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} />
{/* $FlowFixMe */}
{dynamicRoutes.map((dynamicRouteProps: RowDataItem) => (
<Route
key={dynamicRouteProps.route}
path={dynamicRouteProps.route}
component={(routerProps) => <DiscoverPage {...routerProps} dynamicRouteProps={dynamicRouteProps} />}
/> />
<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_MANAGE}`} to={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISH}`} to={`/$/${PAGES.UPLOAD}`} />
<Redirect from={`/$/${PAGES.DEPRECATED__PUBLISHED}`} to={`/$/${PAGES.UPLOADS}`} />
<Route path={`/`} exact component={HomePage} /> <Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} />
<Route path={`/$/${PAGES.DISCOVER}`} exact component={DiscoverPage} /> <Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} />
{/* $FlowFixMe */} <Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} />
{dynamicRoutes.map((dynamicRouteProps: RowDataItem) => ( <Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} />
<Route <Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} />
key={dynamicRouteProps.route} <Route path={`/$/${PAGES.WELCOME}`} exact component={Welcome} />
path={dynamicRouteProps.route}
component={(routerProps) => <DiscoverPage {...routerProps} dynamicRouteProps={dynamicRouteProps} />}
/>
))}
<Route path={`/$/${PAGES.AUTH_SIGNIN}`} exact component={SignInPage} /> <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
<Route path={`/$/${PAGES.AUTH_PASSWORD_RESET}`} exact component={PasswordResetPage} /> {/* @if TARGET='app' */}
<Route path={`/$/${PAGES.AUTH_PASSWORD_SET}`} exact component={PasswordSetPage} /> <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
<Route path={`/$/${PAGES.AUTH}`} exact component={SignUpPage} /> {/* @endif */}
<Route path={`/$/${PAGES.AUTH}/*`} exact component={SignUpPage} /> <Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />
<Route path={`/$/${PAGES.WELCOME}`} exact component={Welcome} /> <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
<Route path={`/$/${PAGES.TOP}`} exact component={TopPage} />
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
<Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} />
<Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
<Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} />
<Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} />
<Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} /> <PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} />
{/* @if TARGET='app' */} <PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} />
<Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} /> <PrivateRoute
{/* @endif */} {...props}
<Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} /> exact
<Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} /> path={`/$/${PAGES.CHANNELS_FOLLOWING}`}
<Route path={`/$/${PAGES.TOP}`} exact component={TopPage} /> component={isAuthenticated || !IS_WEB ? ChannelsFollowingPage : DiscoverPage}
<Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} /> />
<Route path={`/$/${PAGES.INVITE}/:referrer`} exact component={InvitedPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} />
<Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} component={SettingsStripeCard} />
<Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} component={SettingsStripeAccount} />
<Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} /> <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_UPDATE_PWD}`} component={UpdatePasswordPage} />
<PrivateRoute
{...props}
exact
path={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
component={ChannelsFollowingDiscoverPage}
/>
<PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
<PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LISTS}`} component={ListsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CURRENT}`} component={LivestreamCurrentPage} />
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SEND}`} component={SendPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
<PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`} component={OwnComments} />
<PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} /> <Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} /> <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
<PrivateRoute
{...props}
exact
path={`/$/${PAGES.CHANNELS_FOLLOWING}`}
component={isAuthenticated || !IS_WEB ? ChannelsFollowingPage : DiscoverPage}
/>
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_NOTIFICATIONS}`} component={SettingsNotificationsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} component={SettingsStripeCard} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_STRIPE_ACCOUNT}`} component={SettingsStripeAccount} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_UPDATE_PWD}`} component={UpdatePasswordPage} />
<PrivateRoute
{...props}
exact
path={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
component={ChannelsFollowingDiscoverPage}
/>
<PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
<PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
<PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LISTS}`} component={ListsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CURRENT}`} component={LivestreamCurrentPage} />
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.RECEIVE}`} component={ReceivePage} />
<PrivateRoute {...props} path={`/$/${PAGES.SEND}`} component={SendPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
<PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`} component={OwnComments} />
<Route path={`/$/${PAGES.EMBED}/:claimName`} 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.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} /> <Route path="/:claimName" exact component={ShowPage} />
<Route path="/:claimName/:streamName" exact component={ShowPage} />
{/* Below need to go at the end to make sure we don't match any of our pages first */} <Route path="/*" component={FourOhFourPage} />
<Route path="/:claimName" exact component={ShowPage} /> </Switch>
<Route path="/:claimName/:streamName" exact component={ShowPage} />
<Route path="/*" component={FourOhFourPage} />
</Switch>
</React.Suspense>
); );
} }

34
ui/component/wunderbar/view.jsx
View file

@ -1,12 +1,10 @@
// @flow // @flow
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import React from 'react'; import React from 'react';
import { lazyImport } from 'util/lazyImport';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile } from 'effects/use-screensize';
const Button = lazyImport(() => import('component/button' /* webpackChunkName: "button" */)); import Button from 'component/button';
const Icon = lazyImport(() => import('component/common/icon' /* webpackChunkName: "icon" */)); import WunderbarSuggestions from 'component/wunderbarSuggestions';
const WunderbarSuggestions = lazyImport(() => import('component/wunderbarSuggestions' /* webpackChunkName: "secondary" */));
type Props = { type Props = {
doOpenMobileSearch: (any) => void, doOpenMobileSearch: (any) => void,
@ -21,27 +19,13 @@ export default function WunderBar(props: Props) {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
return isMobile ? ( return isMobile ? (
<React.Suspense fallback={null}> <Button icon={ICONS.SEARCH} className="wunderbar__mobile-search" onClick={() => doOpenMobileSearch({ ...props })} />
<Button
icon={ICONS.SEARCH}
className="wunderbar__mobile-search"
onClick={() => doOpenMobileSearch({ ...props })}
/>
</React.Suspense>
) : ( ) : (
<React.Suspense <WunderbarSuggestions
fallback={ channelsOnly={channelsOnly}
<div className="wunderbar__wrapper wunderbar wunderbar__input" aria-disabled> noTopSuggestion={noTopSuggestion}
<Icon icon={ICONS.SEARCH} aria-disabled /> noBottomLinks={noBottomLinks}
</div> customSelectAction={customSelectAction}
} />
>
<WunderbarSuggestions
channelsOnly={channelsOnly}
noTopSuggestion={noTopSuggestion}
noBottomLinks={noBottomLinks}
customSelectAction={customSelectAction}
/>
</React.Suspense>
); );
} }

168
ui/modal/modalRouter/view.jsx
View file

@ -1,103 +1,75 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { lazyImport } from 'util/lazyImport';
import * as MODALS from 'constants/modal_types'; import * as MODALS from 'constants/modal_types';
import LoadingBarOneOff from 'component/loadingBarOneOff';
const ModalAffirmPurchase = lazyImport(() => import ModalAffirmPurchase from 'modal/modalAffirmPurchase';
import('modal/modalAffirmPurchase' /* webpackChunkName: "modalAffirmPurchase" */)
); import ModalAutoGenerateThumbnail from 'modal/modalAutoGenerateThumbnail';
const ModalAutoGenerateThumbnail = lazyImport(() =>
import('modal/modalAutoGenerateThumbnail' /* webpackChunkName: "modalAutoGenerateThumbnail" */) import ModalAutoUpdateDownloaded from 'modal/modalAutoUpdateDownloaded';
);
const ModalAutoUpdateDownloaded = lazyImport(() => import ModalBlockChannel from 'modal/modalBlockChannel';
import('modal/modalAutoUpdateDownloaded' /* webpackChunkName: "modalAutoUpdateDownloaded" */)
); import ModalClaimCollectionAdd from 'modal/modalClaimCollectionAdd';
const ModalBlockChannel = lazyImport(() =>
import('modal/modalBlockChannel' /* webpackChunkName: "modalBlockChannel" */) import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
);
const ModalClaimCollectionAdd = lazyImport(() => import ModalConfirmAge from 'modal/modalConfirmAge';
import('modal/modalClaimCollectionAdd' /* webpackChunkName: "modalClaimCollectionAdd" */) import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
);
const ModalCommentAcknowledgement = lazyImport(() => import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
import('modal/modalCommentAcknowledgement' /* webpackChunkName: "modalCommentAcknowledgement" */)
); import ModalDeleteCollection from 'modal/modalRemoveCollection';
const ModalConfirmAge = lazyImport(() => import('modal/modalConfirmAge' /* webpackChunkName: "modalConfirmAge" */));
const ModalConfirmThumbnailUpload = lazyImport(() => import ModalDownloading from 'modal/modalDownloading';
import('modal/modalConfirmThumbnailUpload' /* webpackChunkName: "modalConfirmThumbnailUpload" */) import ModalError from 'modal/modalError';
); import ModalFileSelection from 'modal/modalFileSelection';
const ModalConfirmTransaction = lazyImport(() =>
import('modal/modalConfirmTransaction' /* webpackChunkName: "modalConfirmTransaction" */) import ModalFileTimeout from 'modal/modalFileTimeout';
); import ModalFirstReward from 'modal/modalFirstReward';
const ModalDeleteCollection = lazyImport(() => import ModalFirstSubscription from 'modal/modalFirstSubscription';
import('modal/modalRemoveCollection' /* webpackChunkName: "modalRemoveCollection" */)
); import ModalImageUpload from 'modal/modalImageUpload';
const ModalDownloading = lazyImport(() => import('modal/modalDownloading' /* webpackChunkName: "modalDownloading" */)); import ModalMassTipsUnlock from 'modal/modalMassTipUnlock';
const ModalError = lazyImport(() => import('modal/modalError' /* webpackChunkName: "modalError" */));
const ModalFileSelection = lazyImport(() => import ModalMobileSearch from 'modal/modalMobileSearch';
import('modal/modalFileSelection' /* webpackChunkName: "modalFileSelection" */)
); import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
const ModalFileTimeout = lazyImport(() => import('modal/modalFileTimeout' /* webpackChunkName: "modalFileTimeout" */));
const ModalFirstReward = lazyImport(() => import('modal/modalFirstReward' /* webpackChunkName: "modalFirstReward" */)); import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
const ModalFirstSubscription = lazyImport(() =>
import('modal/modalFirstSubscription' /* webpackChunkName: "modalFirstSubscription" */) import ModalPhoneCollection from 'modal/modalPhoneCollection';
);
const ModalImageUpload = lazyImport(() => import('modal/modalImageUpload' /* webpackChunkName: "modalImageUpload" */)); import ModalPublish from 'modal/modalPublish';
const ModalMassTipsUnlock = lazyImport(() => import ModalPublishPreview from 'modal/modalPublishPreview';
import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */)
); import ModalRemoveBtcSwapAddress from 'modal/modalRemoveBtcSwapAddress';
const ModalMobileSearch = lazyImport(() =>
import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */) import ModalRemoveCard from 'modal/modalRemoveCard';
); import ModalRemoveComment from 'modal/modalRemoveComment';
const ModalOpenExternalResource = lazyImport(() =>
import('modal/modalOpenExternalResource' /* webpackChunkName: "modalOpenExternalResource" */) import ModalRemoveFile from 'modal/modalRemoveFile';
); import ModalRevokeClaim from 'modal/modalRevokeClaim';
const ModalPasswordUnsave = lazyImport(() => import ModalRewardCode from 'modal/modalRewardCode';
import('modal/modalPasswordUnsave' /* webpackChunkName: "modalPasswordUnsave" */) import ModalSendTip from 'modal/modalSendTip';
); import ModalSetReferrer from 'modal/modalSetReferrer';
const ModalPhoneCollection = lazyImport(() => import ModalSignOut from 'modal/modalSignOut';
import('modal/modalPhoneCollection' /* webpackChunkName: "modalPhoneCollection" */) import ModalSocialShare from 'modal/modalSocialShare';
); import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
const ModalPublish = lazyImport(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */));
const ModalPublishPreview = lazyImport(() => import ModalSyncEnable from 'modal/modalSyncEnable';
import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */) import ModalTransactionFailed from 'modal/modalTransactionFailed';
);
const ModalRemoveBtcSwapAddress = lazyImport(() => import ModalUpgrade from 'modal/modalUpgrade';
import('modal/modalRemoveBtcSwapAddress' /* webpackChunkName: "modalRemoveBtcSwapAddress" */) import ModalViewImage from 'modal/modalViewImage';
); import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
const ModalRemoveCard = lazyImport(() => import('modal/modalRemoveCard' /* webpackChunkName: "modalRemoveCard" */));
const ModalRemoveComment = lazyImport(() => import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
import('modal/modalRemoveComment' /* webpackChunkName: "modalRemoveComment" */)
); import ModalWalletUnlock from 'modal/modalWalletUnlock';
const ModalRemoveFile = lazyImport(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */));
const ModalRevokeClaim = lazyImport(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */)); import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
const ModalRewardCode = lazyImport(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */));
const ModalSendTip = lazyImport(() => import('modal/modalSendTip' /* webpackChunkName: "modalSendTip" */));
const ModalSetReferrer = lazyImport(() => import('modal/modalSetReferrer' /* webpackChunkName: "modalSetReferrer" */));
const ModalSignOut = lazyImport(() => import('modal/modalSignOut' /* webpackChunkName: "modalSignOut" */));
const ModalSocialShare = lazyImport(() => import('modal/modalSocialShare' /* webpackChunkName: "modalSocialShare" */));
const ModalSupportsLiquidate = lazyImport(() =>
import('modal/modalSupportsLiquidate' /* webpackChunkName: "modalSupportsLiquidate" */)
);
const ModalSyncEnable = lazyImport(() => import('modal/modalSyncEnable' /* webpackChunkName: "modalSyncEnable" */));
const ModalTransactionFailed = lazyImport(() =>
import('modal/modalTransactionFailed' /* webpackChunkName: "modalTransactionFailed" */)
);
const ModalUpgrade = lazyImport(() => import('modal/modalUpgrade' /* webpackChunkName: "modalUpgrade" */));
const ModalViewImage = lazyImport(() => import('modal/modalViewImage' /* webpackChunkName: "modalViewImage" */));
const ModalWalletDecrypt = lazyImport(() =>
import('modal/modalWalletDecrypt' /* webpackChunkName: "modalWalletDecrypt" */)
);
const ModalWalletEncrypt = lazyImport(() =>
import('modal/modalWalletEncrypt' /* webpackChunkName: "modalWalletEncrypt" */)
);
const ModalWalletUnlock = lazyImport(() =>
import('modal/modalWalletUnlock' /* webpackChunkName: "modalWalletUnlock" */)
);
const ModalYoutubeWelcome = lazyImport(() =>
import('modal/modalYoutubeWelcome' /* webpackChunkName: "modalYoutubeWelcome" */)
);
type Props = { type Props = {
modal: { id: string, modalProps: {} }, modal: { id: string, modalProps: {} },
@ -222,11 +194,7 @@ function ModalRouter(props: Props) {
return null; return null;
} }
return ( return <SelectedModal {...modalProps} />;
<React.Suspense fallback={<LoadingBarOneOff />}>
<SelectedModal {...modalProps} />
</React.Suspense>
);
} }
export default withRouter(ModalRouter); export default withRouter(ModalRouter);

9
ui/page/file/view.jsx
View file

@ -2,7 +2,6 @@
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import * as React from 'react'; import * as React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import { lazyImport } from 'util/lazyImport';
import Page from 'component/page'; import Page from 'component/page';
import * as RENDER_MODES from 'constants/file_render_modes'; import * as RENDER_MODES from 'constants/file_render_modes';
import FileTitleSection from 'component/fileTitleSection'; import FileTitleSection from 'component/fileTitleSection';
@ -16,7 +15,7 @@ import Button from 'component/button';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import Empty from 'component/common/empty'; import Empty from 'component/common/empty';
const PostViewer = lazyImport(() => import('component/postViewer' /* webpackChunkName: "postViewer" */)); import PostViewer from 'component/postViewer';
export const PRIMARY_PLAYER_WRAPPER_CLASS = 'file-page__video-container'; export const PRIMARY_PLAYER_WRAPPER_CLASS = 'file-page__video-container';
@ -137,11 +136,7 @@ function FilePage(props: Props) {
} }
if (isMarkdown) { if (isMarkdown) {
return ( return <PostViewer uri={uri} />;
<React.Suspense fallback={null}>
<PostViewer uri={uri} />
</React.Suspense>
);
} }
if (RENDER_MODES.TEXT_MODES.includes(renderMode)) { if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {

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

@ -2,7 +2,6 @@
import { ENABLE_NO_SOURCE_CLAIMS } from 'config'; import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { lazyImport } from 'util/lazyImport';
import { Redirect, useHistory } from 'react-router-dom'; import { Redirect, useHistory } from 'react-router-dom';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import ChannelPage from 'page/channel'; import ChannelPage from 'page/channel';
@ -13,12 +12,10 @@ import { formatLbryUrlForWeb } from 'util/url';
import { parseURI } from 'util/lbryURI'; import { parseURI } from 'util/lbryURI';
import * as COLLECTIONS_CONSTS from 'constants/collections'; import * as COLLECTIONS_CONSTS from 'constants/collections';
const AbandonedChannelPreview = lazyImport(() => import AbandonedChannelPreview from 'component/abandonedChannelPreview';
import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */) import FilePage from 'page/file';
); import LivestreamPage from 'page/livestream';
const FilePage = lazyImport(() => import('page/file' /* webpackChunkName: "filePage" */)); import Yrbl from 'component/yrbl';
const LivestreamPage = lazyImport(() => import('page/livestream' /* webpackChunkName: "livestream" */));
const Yrbl = lazyImport(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
type Props = { type Props = {
isResolvingUri: boolean, isResolvingUri: boolean,
@ -146,11 +143,7 @@ function ShowPage(props: Props) {
/> />
</div> </div>
)} )}
{!isResolvingUri && isSubscribed && claim === null && ( {!isResolvingUri && isSubscribed && claim === null && <AbandonedChannelPreview uri={uri} type={'large'} />}
<React.Suspense fallback={null}>
<AbandonedChannelPreview uri={uri} type={'large'} />
</React.Suspense>
)}
</Page> </Page>
); );
} else if (claim.name.length && claim.name[0] === '@') { } else if (claim.name.length && claim.name[0] === '@') {
@ -189,7 +182,7 @@ function ShowPage(props: Props) {
} }
} }
return <React.Suspense fallback={null}>{innerContent}</React.Suspense>; return <React.Fragment>{innerContent}</React.Fragment>;
} }
export default ShowPage; export default ShowPage;