ui/component/app/view.jsx

@@ -6,31 +6,20 @@ import analytics from 'analytics';
 import { buildURI, parseURI } from 'lbry-redux';
 import { SIMPLE_SITE } from 'config';
 import Router from 'component/router/index';
-import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
 import { openContextMenu } from 'util/context-menu';
 import useKonamiListener from 'util/enhanced-layout';
-import Yrbl from 'component/yrbl';
 import FileRenderFloating from 'component/fileRenderFloating';
 import { withRouter } from 'react-router';
 import usePrevious from 'effects/use-previous';
-import Nag from 'component/common/nag';
 import REWARDS from 'rewards';
 import usePersistedState from 'effects/use-persisted-state';
-import FileDrop from 'component/fileDrop';
-import NagContinueFirstRun from 'component/nagContinueFirstRun';
 import Spinner from 'component/spinner';
-import SyncFatalError from 'component/syncFatalError';
 // @if TARGET='app'
 import useZoom from 'effects/use-zoom';
 import useHistoryNav from 'effects/use-history-nav';
 // @endif
 // @if TARGET='web'
-import OpenInAppLink from 'web/component/openInAppLink';
-import YoutubeWelcome from 'web/component/youtubeReferralWelcome';
-import NagDegradedPerformance from 'web/component/nag-degraded-performance';
-import NagDataCollection from 'web/component/nag-data-collection';
-import NagNoUser from 'web/component/nag-no-user';
 import {
   useDegradedPerformance,
   STATUS_OK,
@@ -40,6 +29,24 @@ import {
 } from 'web/effects/use-degraded-performance';
 // @endif
 import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
+
+const FileDrop = React.lazy(() => import('component/fileDrop' /* webpackChunkName: "fileDrop" */));
+const ModalRouter = React.lazy(() => import('modal/modalRouter' /* webpackChunkName: "modalRouter" */));
+const Nag = React.lazy(() => import('component/common/nag' /* webpackChunkName: "nag" */));
+const NagContinueFirstRun = React.lazy(() => import('component/nagContinueFirstRun' /* webpackChunkName: "nagContinueFirstRun" */));
+const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "openInAppLink" */));
+const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */));
+const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
+
+// @if TARGET='web'
+const NagDataCollection = React.lazy(() => import('web/component/nag-data-collection' /* webpackChunkName: "nag-data-collection" */));
+const NagDegradedPerformance = React.lazy(() => import('web/component/nag-degraded-performance' /* webpackChunkName: "nag-degraded-performance" */));
+const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */));
+const YoutubeWelcome = React.lazy(() => import('web/component/youtubeReferralWelcome' /* webpackChunkName: "youtubeReferralWelcome" */));
+// @endif
+
+// ****************************************************************************
+
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
 export const IS_MAC = navigator.userAgent.indexOf('Mac OS X') !== -1;
 
@@ -377,11 +384,13 @@ function App(props: Props) {
 
   if (syncFatalError) {
     return (
+      <React.Suspense fallback={null}>
       <SyncFatalError
         // @if TARGET='web'
         lbryTvApiStatus={lbryTvApiStatus}
         // @endif
       />
+      </React.Suspense>
     );
   }
 
@@ -397,17 +406,22 @@ function App(props: Props) {
       onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
     >
       {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
+        <React.Suspense fallback={null}>
         <Yrbl
           className="main--empty"
           title={__('lbry.tv is currently down')}
           subtitle={__('My wheel broke, but the good news is that someone from LBRY is working on it.')}
         />
+        </React.Suspense>
       ) : (
         <React.Fragment>
           <Router />
+          <React.Suspense fallback={null}>
             <ModalRouter />
             <FileDrop />
+          </React.Suspense>
           <FileRenderFloating />
+          <React.Suspense fallback={null}>
             {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
 
             {/* @if TARGET='app' */}
@@ -433,6 +447,7 @@ function App(props: Props) {
             )}
             {user === null && <NagNoUser />}
             {/* @endif */}
+          </React.Suspense>
         </React.Fragment>
       )}
     </div>

ui/component/claimLink/view.jsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import EmbedPlayButton from 'component/embedPlayButton';
 import Button from 'component/button';
 import UriIndicator from 'component/uriIndicator';
-import { INLINE_PLAYER_WRAPPER_CLASS } from 'component/fileRenderFloating/view';
+import { INLINE_PLAYER_WRAPPER_CLASS } from 'constants/classnames';
 import { SIMPLE_SITE } from 'config';
 
 type Props = {

ui/component/claimPreview/view.jsx

@@ -18,7 +18,6 @@ import ClaimPreviewTitle from 'component/claimPreviewTitle';
 import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import FileDownloadLink from 'component/fileDownloadLink';
-import AbandonedChannelPreview from 'component/abandonedChannelPreview';
 import PublishPending from 'component/publishPending';
 import ClaimMenuList from 'component/claimMenuList';
 import ClaimPreviewLoading from './claim-preview-loading';
@@ -28,6 +27,8 @@ import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 
+const AbandonedChannelPreview = React.lazy(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */));
+
 type Props = {
   uri: string,
   claim: ?Claim, // maybe?
@@ -254,7 +255,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   if (!shouldFetch && showUnresolvedClaim && !isResolvingUri && isChannelUri && claim === null) {
-    return <AbandonedChannelPreview uri={uri} type />;
+    return (
+      <React.Suspense fallback={null}>
+        <AbandonedChannelPreview uri={uri} type />
+      </React.Suspense>
+    );
   }
   if (placeholder === 'publish' && !claim && uri.startsWith('lbry://@')) {
     return null;

ui/component/common/form-components/form-field.jsx

@@ -274,7 +274,8 @@ export class FormField extends React.PureComponent<Props> {
               {...inputProps}
             />
             <div className="form-field__textarea-info">
-              {!noEmojis && <div className="form-field__quick-emojis">
+              {!noEmojis && (
+                <div className="form-field__quick-emojis">
                   {QUICK_EMOJIS.map((emoji) => (
                     <Button
                       key={emoji}
@@ -289,7 +290,8 @@ export class FormField extends React.PureComponent<Props> {
                       }}
                     />
                   ))}
-              </div>}
+                </div>
+              )}
               {countInfo}
             </div>
           </fieldset-section>

ui/component/errorBoundary/view.jsx

@@ -1,18 +1,19 @@
 // @flow
 import type { Node } from 'react';
 import React from 'react';
-import Yrbl from 'component/yrbl';
-import Button from 'component/button';
 import { withRouter } from 'react-router';
 import analytics from 'analytics';
-import I18nMessage from 'component/i18nMessage';
 import Native from 'native';
 import { Lbry } from 'lbry-redux';
 
+const Button = React.lazy(() => import('component/button' /* webpackChunkName: "button" */));
+const I18nMessage = React.lazy(() => import('component/i18nMessage' /* webpackChunkName: "i18nMessage" */));
+const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
+
 type Props = {
   children: Node,
   history: {
-    replace: string => void,
+    replace: (string) => void,
   },
 };
 
@@ -36,7 +37,7 @@ class ErrorBoundary extends React.Component<Props, State> {
 
   componentDidCatch(error, errorInfo) {
     // @if TARGET='web'
-    analytics.sentryError(error, errorInfo).then(sentryEventId => {
+    analytics.sentryError(error, errorInfo).then((sentryEventId) => {
       this.setState({ sentryEventId });
     });
     // @endif
@@ -49,7 +50,7 @@ class ErrorBoundary extends React.Component<Props, State> {
         errorMessage += `sdk version: ${sdkVersion}\n`;
         errorMessage += `page: ${window.location.href.split('.html')[1]}\n`;
         errorMessage += `${error.stack}`;
-        analytics.error(errorMessage).then(isSharingData => {
+        analytics.error(errorMessage).then((isSharingData) => {
           this.setState({ desktopErrorReported: isSharingData });
         });
       });
@@ -74,6 +75,7 @@ class ErrorBoundary extends React.Component<Props, State> {
     if (hasError) {
       return (
         <div className="main main--full-width main--empty">
+          <React.Suspense fallback={null}>
             <Yrbl
               type="sad"
               title={__('Aw shucks!')}
@@ -95,6 +97,7 @@ class ErrorBoundary extends React.Component<Props, State> {
                 </I18nMessage>
               }
             />
+          </React.Suspense>
           {!errorWasReported && (
             <div className="error__wrapper">
               <span className="error__text">

ui/component/fileRender/view.jsx

@@ -3,16 +3,11 @@ import { remote } from 'electron';
 import React from 'react';
 import classnames from 'classnames';
 import * as RENDER_MODES from 'constants/file_render_modes';
-import VideoViewer from 'component/viewers/videoViewer';
-import ImageViewer from 'component/viewers/imageViewer';
-import AppViewer from 'component/viewers/appViewer';
 import { withRouter } from 'react-router-dom';
 import fs from 'fs';
 import analytics from 'analytics';
 
 import DocumentViewer from 'component/viewers/documentViewer';
-import PdfViewer from 'component/viewers/pdfViewer';
-import HtmlViewer from 'component/viewers/htmlViewer';
 
 // @if TARGET='app'
 // should match
@@ -21,6 +16,18 @@ import ComicBookViewer from 'component/viewers/comicBookViewer';
 import ThreeViewer from 'component/viewers/threeViewer';
 // @endif
 
+const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "viewers/appViewer" */));
+const HtmlViewer = React.lazy(() =>
+  import('component/viewers/htmlViewer' /* webpackChunkName: "viewers/htmlViewer" */)
+);
+const ImageViewer = React.lazy(() =>
+  import('component/viewers/imageViewer' /* webpackChunkName: "viewers/imageViewer" */)
+);
+const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "viewers/pdfViewer" */));
+const VideoViewer = React.lazy(() =>
+  import('component/viewers/videoViewer' /* webpackChunkName: "viewers/videoViewer" */)
+);
+
 type Props = {
   uri: string,
   streamingUrl: string,
@@ -85,17 +92,27 @@ class FileRender extends React.PureComponent<Props> {
       case RENDER_MODES.AUDIO:
       case RENDER_MODES.VIDEO:
         return (
+          <React.Suspense fallback={null}>
             <VideoViewer
               uri={uri}
               source={source}
               contentType={contentType}
               desktopPlayStartTime={desktopPlayStartTime}
             />
+          </React.Suspense>
         );
       case RENDER_MODES.IMAGE:
-        return <ImageViewer uri={uri} source={source} />;
+        return (
+          <React.Suspense fallback={null}>
+            <ImageViewer uri={uri} source={source} />;
+          </React.Suspense>
+        );
       case RENDER_MODES.HTML:
-        return <HtmlViewer source={downloadPath || source} />;
+        return (
+          <React.Suspense fallback={null}>
+            <HtmlViewer source={downloadPath || source} />;
+          </React.Suspense>
+        );
       case RENDER_MODES.DOCUMENT:
       case RENDER_MODES.MARKDOWN:
         return (
@@ -115,7 +132,11 @@ class FileRender extends React.PureComponent<Props> {
       case RENDER_MODES.DOCX:
         return <DocxViewer source={downloadPath} />;
       case RENDER_MODES.PDF:
-        return <PdfViewer source={downloadPath || source} />;
+        return (
+          <React.Suspense fallback={null}>
+            <PdfViewer source={downloadPath || source} />;
+          </React.Suspense>
+        );
       case RENDER_MODES.CAD:
         return (
           <ThreeViewer
@@ -139,7 +160,11 @@ class FileRender extends React.PureComponent<Props> {
           />
         );
       case RENDER_MODES.APPLICATION:
-        return <AppViewer uri={uri} />;
+        return (
+          <React.Suspense fallback={null}>
+            <AppViewer uri={uri} />;
+          </React.Suspense>
+        );
     }
 
     return null;

ui/component/fileRenderFloating/view.jsx

@@ -1,23 +1,24 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as RENDER_MODES from 'constants/file_render_modes';
+import { INLINE_PLAYER_WRAPPER_CLASS } from 'constants/classnames';
 import React, { useEffect, useState } from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
 import LoadingScreen from 'component/common/loading-screen';
-import FileRender from 'component/fileRender';
 import UriIndicator from 'component/uriIndicator';
 import usePersistedState from 'effects/use-persisted-state';
 import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
-import Draggable from 'react-draggable';
 import { onFullscreenChange } from 'util/full-screen';
 import { useIsMobile } from 'effects/use-screensize';
 import debounce from 'util/debounce';
 import { useHistory } from 'react-router';
 
+const Draggable = React.lazy(() => import('react-draggable' /* webpackChunkName: "draggable" */));
+const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
+
 const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
 const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60;
-export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
 
 type Props = {
   isFloating: boolean,
@@ -243,6 +244,7 @@ export default function FileRenderFloating(props: Props) {
   }
 
   return (
+    <React.Suspense fallback={null}>
       <Draggable
         onDrag={handleDragMove}
         onStart={handleDragStart}
@@ -289,6 +291,7 @@ export default function FileRenderFloating(props: Props) {
             )}
 
             {isReadyToPlay ? (
+              <React.Suspense fallback={null}>
                 <FileRender
                   className="draggable"
                   uri={uri}
@@ -296,6 +299,7 @@ export default function FileRenderFloating(props: Props) {
                   desktopPlayStartTime={desktopPlayStartTime}
                   // @endif
                 />
+              </React.Suspense>
             ) : (
               <LoadingScreen status={loadingMessage} />
             )}
@@ -310,5 +314,6 @@ export default function FileRenderFloating(props: Props) {
           </div>
         </div>
       </Draggable>
+    </React.Suspense>
   );
 }

ui/component/fileRenderInline/view.jsx

@@ -1,9 +1,10 @@
 // @flow
 import React, { useState, useEffect } from 'react';
-import FileRender from 'component/fileRender';
 import LoadingScreen from 'component/common/loading-screen';
 import { NON_STREAM_MODES } from 'constants/file_render_modes';
 
+const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
+
 type Props = {
   isPlaying: boolean,
   fileInfo: FileListItem,
@@ -69,5 +70,11 @@ export default function FileRenderInline(props: Props) {
     return null;
   }
 
-  return renderContent ? <FileRender uri={uri} /> : <LoadingScreen isDocument />;
+  return renderContent ? (
+    <React.Suspense fallback={null}>
+      <FileRender uri={uri} />
+    </React.Suspense>
+  ) : (
+    <LoadingScreen isDocument />
+  );
 }

ui/component/page/view.jsx

@@ -4,7 +4,6 @@ import React, { Fragment } from 'react';
 import classnames from 'classnames';
 import SideNavigation from 'component/sideNavigation';
 import Header from 'component/header';
-import Footer from 'web/component/footer';
 /* @if TARGET='app' */
 import StatusBar from 'component/common/status-bar';
 /* @endif */
@@ -13,6 +12,8 @@ import { useHistory } from 'react-router';
 import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
 import { parseURI } from 'lbry-redux';
 
+const Footer = React.lazy(() => import('web/component/footer' /* webpackChunkName: "component/footer" */));
+
 export const MAIN_CLASS = 'main';
 type Props = {
   children: Node | Array<Node>,
@@ -126,7 +127,7 @@ function Page(props: Props) {
         {/* @endif */}
       </div>
       {/* @if TARGET='web' */}
-      {!noFooter && <Footer />}
+      {!noFooter && <React.Suspense fallback={null}><Footer /></React.Suspense>}
       {/* @endif */}
     </Fragment>
   );

ui/component/previewLink/view.jsx

@@ -13,7 +13,7 @@ type Props = {
   title: ?string,
   thumbnail: ?string,
   description: ?string,
-  history: { push: string => void },
+  history: { push: (string) => void },
 };
 
 class PreviewLink extends React.PureComponent<Props> {

ui/component/router/view.jsx

@@ -1,67 +1,78 @@
 // @flow
-import * as PAGES from 'constants/pages';
 import React, { useEffect } 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 SettingsCreatorPage from 'page/settingsCreator';
-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 ReportContentPage from 'page/reportContent';
-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 ListsPage from 'page/lists';
-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 LiveStreamSetupPage from 'page/livestreamSetup';
-import LivestreamCurrentPage from 'page/livestreamCurrent';
-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 ReceivePage from 'page/receive';
-import SendPage from 'page/send';
-import SwapPage from 'page/swap';
-import NotificationsPage from 'page/notifications';
-import SignInWalletPasswordPage from 'page/signInWalletPassword';
-import YoutubeSyncPage from 'page/youtubeSync';
-import CollectionPage from 'page/collection';
 
+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, SIMPLE_SITE } from 'config';
 
+import HomePage from 'page/home';
+
+// @if TARGET='app'
+const BackupPage = React.lazy(() => import('page/backup' /* webpackChunkName: "backup" */));
+// @endif
+
+//  @if TARGET='web'
+const Code2257Page = React.lazy(() => import('web/page/code2257'));
+// @endif
+
+// Chunk: "authenticate"
+const SignInPage = React.lazy(() => import('page/signIn' /* webpackChunkName: "authenticate" */));
+const SignInWalletPasswordPage = React.lazy(() =>
+  import('page/signInWalletPassword' /* webpackChunkName: "authenticate" */)
+);
+const SignUpPage = React.lazy(() => import('page/signUp' /* webpackChunkName: "authenticate" */));
+const SignInVerifyPage = React.lazy(() => import('page/signInVerify' /* webpackChunkName: "authenticate" */));
+
+// Chunk: "wallet"
+const BuyPage = React.lazy(() => import('page/buy' /* webpackChunkName: "wallet" */));
+const ReceivePage = React.lazy(() => import('page/receive' /* webpackChunkName: "wallet" */));
+const SendPage = React.lazy(() => import('page/send' /* webpackChunkName: "wallet" */));
+const SwapPage = React.lazy(() => import('page/swap' /* webpackChunkName: "wallet" */));
+const WalletPage = React.lazy(() => import('page/wallet' /* webpackChunkName: "wallet" */));
+
+// Chunk: none
+const NotificationsPage = React.lazy(() => import('page/notifications' /* webpackChunkName: "notifications" */));
+const CollectionPage = React.lazy(() => import('page/collection' /* webpackChunkName: "collection" */));
+const ChannelNew = React.lazy(() => import('page/channelNew' /* webpackChunkName: "channelNew" */));
+const ChannelsFollowingDiscoverPage = React.lazy(() => import('page/channelsFollowingDiscover' /* webpackChunkName: "channelsFollowingDiscover" */));
+const ChannelsFollowingPage = React.lazy(() => import('page/channelsFollowing' /* webpackChunkName: "channelsFollowing" */));
+const ChannelsPage = React.lazy(() => import('page/channels' /* webpackChunkName: "channels" */));
+const CheckoutPage = React.lazy(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */));
+const CreatorDashboard = React.lazy(() => import('page/creatorDashboard' /* webpackChunkName: "creatorDashboard" */));
+const DiscoverPage = React.lazy(() => import('page/discover' /* webpackChunkName: "discover" */));
+const EmbedWrapperPage = React.lazy(() => import('page/embedWrapper' /* webpackChunkName: "embedWrapper" */));
+const FileListPublished = React.lazy(() => import('page/fileListPublished' /* webpackChunkName: "fileListPublished" */));
+const FourOhFourPage = React.lazy(() => import('page/fourOhFour' /* webpackChunkName: "fourOhFour" */));
+const HelpPage = React.lazy(() => import('page/help' /* webpackChunkName: "help" */));
+const InvitePage = React.lazy(() => import('page/invite' /* webpackChunkName: "invite" */));
+const InvitedPage = React.lazy(() => import('page/invited' /* webpackChunkName: "invited" */));
+const LibraryPage = React.lazy(() => import('page/library' /* webpackChunkName: "library" */));
+const ListBlockedPage = React.lazy(() => import('page/listBlocked' /* webpackChunkName: "listBlocked" */));
+const ListsPage = React.lazy(() => import('page/lists' /* webpackChunkName: "lists" */));
+const LiveStreamSetupPage = React.lazy(() => import('page/livestreamSetup' /* webpackChunkName: "livestreamSetup" */));
+const LivestreamCurrentPage = React.lazy(() => import('page/livestreamCurrent' /* webpackChunkName: "livestreamCurrent" */));
+const PasswordResetPage = React.lazy(() => import('page/passwordReset' /* webpackChunkName: "passwordReset" */));
+const PasswordSetPage = React.lazy(() => import('page/passwordSet' /* webpackChunkName: "passwordSet" */));
+const PublishPage = React.lazy(() => import('page/publish' /* webpackChunkName: "publish" */));
+const ReportContentPage = React.lazy(() => import('page/reportContent' /* webpackChunkName: "reportContent" */));
+const ReportPage = React.lazy(() => import('page/report' /* webpackChunkName: "report" */));
+const RepostNew = React.lazy(() => import('page/repost' /* webpackChunkName: "repost" */));
+const RewardsPage = React.lazy(() => import('page/rewards' /* webpackChunkName: "rewards" */));
+const RewardsVerifyPage = React.lazy(() => import('page/rewardsVerify' /* webpackChunkName: "rewardsVerify" */));
+const SearchPage = React.lazy(() => import('page/search' /* webpackChunkName: "search" */));
+const SettingsAdvancedPage = React.lazy(() => import('page/settingsAdvanced' /* webpackChunkName: "settingsAdvanced" */));
+const SettingsCreatorPage = React.lazy(() => import('page/settingsCreator' /* webpackChunkName: "settingsCreator" */));
+const SettingsNotificationsPage = React.lazy(() => import('page/settingsNotifications' /* webpackChunkName: "settingsNotifications" */));
+const SettingsPage = React.lazy(() => import('page/settings' /* webpackChunkName: "settings" */));
+const ShowPage = React.lazy(() => import('page/show' /* webpackChunkName: "show" */));
+const TagsFollowingManagePage = React.lazy(() => import('page/tagsFollowingManage' /* webpackChunkName: "tagsFollowingManage" */));
+const TagsFollowingPage = React.lazy(() => import('page/tagsFollowing' /* webpackChunkName: "tagsFollowing" */));
+const TopPage = React.lazy(() => import('page/top' /* webpackChunkName: "top" */));
+const Welcome = React.lazy(() => import('page/welcome' /* webpackChunkName: "welcome" */));
+const YoutubeSyncPage = React.lazy(() => import('page/youtubeSync' /* webpackChunkName: "youtubeSync" */));
+
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
   history.scrollRestoration = 'manual';
@@ -210,6 +221,7 @@ function AppRouter(props: Props) {
   }
 
   return (
+    <React.Suspense fallback={<div>TODO.....................</div>}>
       <Switch>
         {/* @if TARGET='app' */}
         {welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}
@@ -308,6 +320,7 @@ function AppRouter(props: Props) {
         <Route path="/:claimName/:streamName" exact component={ShowPage} />
         <Route path="/*" component={FourOhFourPage} />
       </Switch>
+    </React.Suspense>
   );
 }
 

ui/component/viewers/videoViewer/view.jsx

@@ -5,7 +5,6 @@ import * as ICONS from 'constants/icons';
 import React, { useEffect, useState, useContext, useCallback } from 'react';
 import { stopContextMenu } from 'util/context-menu';
 import type { Player } from './internal/videojs';
-import VideoJs from './internal/videojs';
 import analytics from 'analytics';
 import { EmbedContext } from 'page/embedWrapper/view';
 import classnames from 'classnames';
@@ -21,6 +20,8 @@ import Button from 'component/button';
 import I18nMessage from 'component/i18nMessage';
 import { useHistory } from 'react-router';
 
+const VideoJs = React.lazy(() => import('./internal/videojs' /* webpackChunkName: "videojs" */));
+
 const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
 const PLAY_TIMEOUT_LIMIT = 2000;
 
@@ -332,6 +333,7 @@ function VideoViewer(props: Props) {
       )}
 
       {!isFetchingAd && (
+        <React.Suspense fallback={null}>
           <VideoJs
             adUrl={adUrl}
             source={adUrl || source}
@@ -343,6 +345,7 @@ function VideoViewer(props: Props) {
             toggleVideoTheaterMode={toggleVideoTheaterMode}
             autoplay={!embedded || autoplayIfEmbedded}
           />
+        </React.Suspense>
       )}
     </div>
   );

ui/component/wunderbar/view.jsx

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

ui/constants/classnames.js

@@ -0,0 +1,2 @@
+// component/fileRenderFloating
+export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';

ui/modal/modalRouter/view.jsx

@@ -2,46 +2,47 @@
 import React from 'react';
 import { withRouter } from 'react-router';
 import * as MODALS from 'constants/modal_types';
-import ModalError from 'modal/modalError';
+
-import ModalDownloading from 'modal/modalDownloading';
+const ModalAffirmPurchase = React.lazy(() => import('modal/modalAffirmPurchase' /* webpackChunkName: "modalAffirmPurchase" */));
-import ModalAutoGenerateThumbnail from 'modal/modalAutoGenerateThumbnail';
+const ModalAutoGenerateThumbnail = React.lazy(() => import('modal/modalAutoGenerateThumbnail' /* webpackChunkName: "modalAutoGenerateThumbnail" */));
-import ModalAutoUpdateDownloaded from 'modal/modalAutoUpdateDownloaded';
+const ModalAutoUpdateDownloaded = React.lazy(() => import('modal/modalAutoUpdateDownloaded' /* webpackChunkName: "modalAutoUpdateDownloaded" */));
-import ModalUpgrade from 'modal/modalUpgrade';
+const ModalClaimCollectionAdd = React.lazy(() => import('modal/modalClaimCollectionAdd' /* webpackChunkName: "modalClaimCollectionAdd" */));
-import ModalFirstReward from 'modal/modalFirstReward';
+const ModalCommentAcknowledgement = React.lazy(() => import('modal/modalCommentAcknowledgement' /* webpackChunkName: "modalCommentAcknowledgement" */));
-import ModalRemoveFile from 'modal/modalRemoveFile';
+const ModalConfirmAge = React.lazy(() => import('modal/modalConfirmAge' /* webpackChunkName: "modalConfirmAge" */));
-import ModalTransactionFailed from 'modal/modalTransactionFailed';
+const ModalConfirmThumbnailUpload = React.lazy(() => import('modal/modalConfirmThumbnailUpload' /* webpackChunkName: "modalConfirmThumbnailUpload" */));
-import ModalFileTimeout from 'modal/modalFileTimeout';
+const ModalConfirmTransaction = React.lazy(() => import('modal/modalConfirmTransaction' /* webpackChunkName: "modalConfirmTransaction" */));
-import ModalAffirmPurchase from 'modal/modalAffirmPurchase';
+const ModalDeleteCollection = React.lazy(() => import('modal/modalRemoveCollection' /* webpackChunkName: "modalRemoveCollection" */));
-import ModalRevokeClaim from 'modal/modalRevokeClaim';
+const ModalDownloading = React.lazy(() => import('modal/modalDownloading' /* webpackChunkName: "modalDownloading" */));
-import ModalPhoneCollection from 'modal/modalPhoneCollection';
+const ModalError = React.lazy(() => import('modal/modalError' /* webpackChunkName: "modalError" */));
-import ModalFirstSubscription from 'modal/modalFirstSubscription';
+const ModalFileSelection = React.lazy(() => import('modal/modalFileSelection' /* webpackChunkName: "modalFileSelection" */));
-import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
+const ModalFileTimeout = React.lazy(() => import('modal/modalFileTimeout' /* webpackChunkName: "modalFileTimeout" */));
-import ModalSocialShare from 'modal/modalSocialShare';
+const ModalFirstReward = React.lazy(() => import('modal/modalFirstReward' /* webpackChunkName: "modalFirstReward" */));
-import ModalSendTip from 'modal/modalSendTip';
+const ModalFirstSubscription = React.lazy(() => import('modal/modalFirstSubscription' /* webpackChunkName: "modalFirstSubscription" */));
-import ModalPublish from 'modal/modalPublish';
+const ModalImageUpload = React.lazy(() => import('modal/modalImageUpload' /* webpackChunkName: "modalImageUpload" */));
-import ModalPublishPreview from 'modal/modalPublishPreview';
+const ModalMassTipsUnlock = React.lazy(() => import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */));
-import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
+const ModalMobileSearch = React.lazy(() => import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */));
-import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
+const ModalOpenExternalResource = React.lazy(() => import('modal/modalOpenExternalResource' /* webpackChunkName: "modalOpenExternalResource" */));
-import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
+const ModalPasswordUnsave = React.lazy(() => import('modal/modalPasswordUnsave' /* webpackChunkName: "modalPasswordUnsave" */));
-import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
+const ModalPhoneCollection = React.lazy(() => import('modal/modalPhoneCollection' /* webpackChunkName: "modalPhoneCollection" */));
-import ModalWalletUnlock from 'modal/modalWalletUnlock';
+const ModalPublish = React.lazy(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */));
-import ModalRewardCode from 'modal/modalRewardCode';
+const ModalPublishPreview = React.lazy(() => import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */));
-import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
+const ModalRemoveBtcSwapAddress = React.lazy(() => import('modal/modalRemoveBtcSwapAddress' /* webpackChunkName: "modalRemoveBtcSwapAddress" */));
-import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
+const ModalRemoveFile = React.lazy(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */));
-import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
+const ModalRevokeClaim = React.lazy(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */));
-import ModalSetReferrer from 'modal/modalSetReferrer';
+const ModalRewardCode = React.lazy(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */));
-import ModalSignOut from 'modal/modalSignOut';
+const ModalSendTip = React.lazy(() => import('modal/modalSendTip' /* webpackChunkName: "modalSendTip" */));
-import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
+const ModalSetReferrer = React.lazy(() => import('modal/modalSetReferrer' /* webpackChunkName: "modalSetReferrer" */));
-import ModalConfirmAge from 'modal/modalConfirmAge';
+const ModalSignOut = React.lazy(() => import('modal/modalSignOut' /* webpackChunkName: "modalSignOut" */));
-import ModalFileSelection from 'modal/modalFileSelection';
+const ModalSocialShare = React.lazy(() => import('modal/modalSocialShare' /* webpackChunkName: "modalSocialShare" */));
-import ModalSyncEnable from 'modal/modalSyncEnable';
+const ModalSupportsLiquidate = React.lazy(() => import('modal/modalSupportsLiquidate' /* webpackChunkName: "modalSupportsLiquidate" */));
-import ModalImageUpload from 'modal/modalImageUpload';
+const ModalSyncEnable = React.lazy(() => import('modal/modalSyncEnable' /* webpackChunkName: "modalSyncEnable" */));
-import ModalMobileSearch from 'modal/modalMobileSearch';
+const ModalTransactionFailed = React.lazy(() => import('modal/modalTransactionFailed' /* webpackChunkName: "modalTransactionFailed" */));
-import ModalViewImage from 'modal/modalViewImage';
+const ModalUpgrade = React.lazy(() => import('modal/modalUpgrade' /* webpackChunkName: "modalUpgrade" */));
-import ModalMassTipsUnlock from 'modal/modalMassTipUnlock';
+const ModalViewImage = React.lazy(() => import('modal/modalViewImage' /* webpackChunkName: "modalViewImage" */));
-import ModalRemoveBtcSwapAddress from 'modal/modalRemoveBtcSwapAddress';
+const ModalWalletDecrypt = React.lazy(() => import('modal/modalWalletDecrypt' /* webpackChunkName: "modalWalletDecrypt" */));
-import ModalClaimCollectionAdd from 'modal/modalClaimCollectionAdd';
+const ModalWalletEncrypt = React.lazy(() => import('modal/modalWalletEncrypt' /* webpackChunkName: "modalWalletEncrypt" */));
-import ModalDeleteCollection from 'modal/modalRemoveCollection';
+const ModalWalletUnlock = React.lazy(() => import('modal/modalWalletUnlock' /* webpackChunkName: "modalWalletUnlock" */));
+const ModalYoutubeWelcome = React.lazy(() => import('modal/modalYoutubeWelcome' /* webpackChunkName: "modalYoutubeWelcome" */));
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -66,92 +67,105 @@ function ModalRouter(props: Props) {
     return null;
   }
 
-  const { id, modalProps } = modal;
+  function getModal(id) {
-
     switch (id) {
       case MODALS.UPGRADE:
-      return <ModalUpgrade {...modalProps} />;
+        return ModalUpgrade;
       case MODALS.DOWNLOADING:
-      return <ModalDownloading {...modalProps} />;
+        return ModalDownloading;
       case MODALS.AUTO_GENERATE_THUMBNAIL:
-      return <ModalAutoGenerateThumbnail {...modalProps} />;
+        return ModalAutoGenerateThumbnail;
       case MODALS.AUTO_UPDATE_DOWNLOADED:
-      return <ModalAutoUpdateDownloaded {...modalProps} />;
+        return ModalAutoUpdateDownloaded;
       case MODALS.ERROR:
-      return <ModalError {...modalProps} />;
+        return ModalError;
       case MODALS.FILE_TIMEOUT:
-      return <ModalFileTimeout {...modalProps} />;
+        return ModalFileTimeout;
       case MODALS.FIRST_REWARD:
-      return <ModalFirstReward {...modalProps} />;
+        return ModalFirstReward;
       case MODALS.TRANSACTION_FAILED:
-      return <ModalTransactionFailed {...modalProps} />;
+        return ModalTransactionFailed;
       case MODALS.CONFIRM_FILE_REMOVE:
-      return <ModalRemoveFile {...modalProps} />;
+        return ModalRemoveFile;
       case MODALS.AFFIRM_PURCHASE:
-      return <ModalAffirmPurchase {...modalProps} />;
+        return ModalAffirmPurchase;
       case MODALS.CONFIRM_CLAIM_REVOKE:
-      return <ModalRevokeClaim {...modalProps} />;
+        return ModalRevokeClaim;
       case MODALS.PHONE_COLLECTION:
-      return <ModalPhoneCollection {...modalProps} />;
+        return ModalPhoneCollection;
       case MODALS.FIRST_SUBSCRIPTION:
-      return <ModalFirstSubscription {...modalProps} />;
+        return ModalFirstSubscription;
       case MODALS.SEND_TIP:
-      return <ModalSendTip {...modalProps} />;
+        return ModalSendTip;
       case MODALS.SOCIAL_SHARE:
-      return <ModalSocialShare {...modalProps} />;
+        return ModalSocialShare;
       case MODALS.PUBLISH:
-      return <ModalPublish {...modalProps} />;
+        return ModalPublish;
       case MODALS.PUBLISH_PREVIEW:
-      return <ModalPublishPreview {...modalProps} />;
+        return ModalPublishPreview;
       case MODALS.CONFIRM_EXTERNAL_RESOURCE:
-      return <ModalOpenExternalResource {...modalProps} />;
+        return ModalOpenExternalResource;
       case MODALS.CONFIRM_TRANSACTION:
-      return <ModalConfirmTransaction {...modalProps} />;
+        return ModalConfirmTransaction;
       case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
-      return <ModalConfirmThumbnailUpload {...modalProps} />;
+        return ModalConfirmThumbnailUpload;
       case MODALS.WALLET_ENCRYPT:
-      return <ModalWalletEncrypt {...modalProps} />;
+        return ModalWalletEncrypt;
       case MODALS.WALLET_DECRYPT:
-      return <ModalWalletDecrypt {...modalProps} />;
+        return ModalWalletDecrypt;
       case MODALS.WALLET_UNLOCK:
-      return <ModalWalletUnlock {...modalProps} />;
+        return ModalWalletUnlock;
       case MODALS.WALLET_PASSWORD_UNSAVE:
-      return <ModalPasswordUnsave {...modalProps} />;
+        return ModalPasswordUnsave;
       case MODALS.REWARD_GENERATED_CODE:
-      return <ModalRewardCode {...modalProps} />;
+        return ModalRewardCode;
       case MODALS.COMMENT_ACKNOWEDGEMENT:
-      return <ModalCommentAcknowledgement {...modalProps} />;
+        return ModalCommentAcknowledgement;
       case MODALS.YOUTUBE_WELCOME:
-      return <ModalYoutubeWelcome />;
+        return ModalYoutubeWelcome;
       case MODALS.SET_REFERRER:
-      return <ModalSetReferrer {...modalProps} />;
+        return ModalSetReferrer;
       case MODALS.SIGN_OUT:
-      return <ModalSignOut {...modalProps} />;
+        return ModalSignOut;
       case MODALS.CONFIRM_AGE:
-      return <ModalConfirmAge {...modalProps} />;
+        return ModalConfirmAge;
       case MODALS.FILE_SELECTION:
-      return <ModalFileSelection {...modalProps} />;
+        return ModalFileSelection;
       case MODALS.LIQUIDATE_SUPPORTS:
-      return <ModalSupportsLiquidate {...modalProps} />;
+        return ModalSupportsLiquidate;
       case MODALS.IMAGE_UPLOAD:
-      return <ModalImageUpload {...modalProps} />;
+        return ModalImageUpload;
       case MODALS.SYNC_ENABLE:
-      return <ModalSyncEnable {...modalProps} />;
+        return ModalSyncEnable;
       case MODALS.MOBILE_SEARCH:
-      return <ModalMobileSearch {...modalProps} />;
+        return ModalMobileSearch;
       case MODALS.VIEW_IMAGE:
-      return <ModalViewImage {...modalProps} />;
+        return ModalViewImage;
       case MODALS.MASS_TIP_UNLOCK:
-      return <ModalMassTipsUnlock {...modalProps} />;
+        return ModalMassTipsUnlock;
       case MODALS.CONFIRM_REMOVE_BTC_SWAP_ADDRESS:
-      return <ModalRemoveBtcSwapAddress {...modalProps} />;
+        return ModalRemoveBtcSwapAddress;
       case MODALS.COLLECTION_ADD:
-      return <ModalClaimCollectionAdd {...modalProps} />;
+        return ModalClaimCollectionAdd;
       case MODALS.COLLECTION_DELETE:
-      return <ModalDeleteCollection {...modalProps} />;
+        return ModalDeleteCollection;
       default:
         return null;
     }
   }
 
+  const { id, modalProps } = modal;
+  const SelectedModal = getModal(id);
+
+  if (SelectedModal === null) {
+    return null;
+  }
+
+  return (
+    <React.Suspense fallback={null}>
+      <SelectedModal {...modalProps} />
+    </React.Suspense>
+  );
+}
+
 export default withRouter(ModalRouter);

ui/page/embedWrapper/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React, { useEffect } from 'react';
 import classnames from 'classnames';
-import FileRender from 'component/fileRender';
 import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
 import Spinner from 'component/spinner';
 import Button from 'component/button';
@@ -9,6 +8,8 @@ import Card from 'component/common/card';
 import { formatLbryUrlForWeb } from 'util/url';
 import { useHistory } from 'react-router';
 
+const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
+
 type Props = {
   uri: string,
   resolveUri: (string) => void,
@@ -98,7 +99,9 @@ const EmbedWrapperPage = (props: Props) => {
     >
       <EmbedContext.Provider value>
         {readyToDisplay ? (
+          <React.Suspense fallback={null}>
             <FileRender uri={uri} embedded />
+          </React.Suspense>
         ) : (
           <div className="embed__loading">
             <FileViewerEmbeddedTitle uri={uri} />

ui/page/file/view.jsx

@@ -10,9 +10,10 @@ import FileRenderDownload from 'component/fileRenderDownload';
 import RecommendedContent from 'component/recommendedContent';
 import CollectionContent from 'component/collectionContentSidebar';
 import CommentsList from 'component/commentsList';
-import PostViewer from 'component/postViewer';
 import Empty from 'component/common/empty';
 
+const PostViewer = React.lazy(() => import('component/postViewer' /* webpackChunkName: "postViewer" */));
+
 export const PRIMARY_PLAYER_WRAPPER_CLASS = 'file-page__video-container';
 
 type Props = {
@@ -96,7 +97,11 @@ function FilePage(props: Props) {
     }
 
     if (isMarkdown) {
-      return <PostViewer uri={uri} />;
+      return (
+        <React.Suspense fallback={null}>
+          <PostViewer uri={uri} />
+        </React.Suspense>
+      );
     }
 
     if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {

ui/page/show/view.jsx

@@ -5,16 +5,17 @@ import React, { useEffect } from 'react';
 import { Redirect, useHistory } from 'react-router-dom';
 import Spinner from 'component/spinner';
 import ChannelPage from 'page/channel';
-import FilePage from 'page/file';
-import LivestreamPage from 'page/livestream';
 import Page from 'component/page';
 import Button from 'component/button';
 import Card from 'component/common/card';
-import AbandonedChannelPreview from 'component/abandonedChannelPreview';
-import Yrbl from 'component/yrbl';
 import { formatLbryUrlForWeb } from 'util/url';
 import { parseURI, COLLECTIONS_CONSTS } from 'lbry-redux';
 
+const AbandonedChannelPreview = React.lazy(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */));
+const FilePage = React.lazy(() => import('page/file' /* webpackChunkName: "filePage" */));
+const LivestreamPage = React.lazy(() => import('page/livestream' /* webpackChunkName: "livestream" */));
+const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
+
 type Props = {
   isResolvingUri: boolean,
   resolveUri: (string) => void,
@@ -157,7 +158,11 @@ function ShowPage(props: Props) {
             />
           </div>
         )}
-        {!isResolvingUri && isSubscribed && claim === null && <AbandonedChannelPreview uri={uri} type={'large'} />}
+        {!isResolvingUri && isSubscribed && claim === null && (
+          <React.Suspense fallback={null}>
+            <AbandonedChannelPreview uri={uri} type={'large'} />
+          </React.Suspense>
+        )}
       </Page>
     );
   } else if (claim.name.length && claim.name[0] === '@') {
@@ -196,7 +201,7 @@ function ShowPage(props: Props) {
     }
   }
 
-  return innerContent;
+  return <React.Suspense fallback={null}>{innerContent}</React.Suspense>;
 }
 
 export default ShowPage;

ui/scss/component/_content.scss

@@ -41,6 +41,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  background-color: black;
 }
 
 .content__wrapper--floating {

ui/scss/component/_file-render.scss

@@ -528,7 +528,7 @@ video::-internal-media-controls-overlay-cast-button {
   .vjs-playback-rate .vjs-menu {
     // Extend the width to prevent a potential scrollbar from blocking the text.
     width: 8em;
-    left: -2em;
+    left: -3em;
   }
 }
 

ui/scss/component/_videojs.scss

@@ -84,6 +84,11 @@
     font-size: 10px;
   }
 
+  .vjs-playback-rate .vjs-menu .vjs-menu-content .vjs-menu-item {
+    margin: 0 0;
+    padding: 5px 10px;
+  }
+
   // Volume slider
   .vjs-volume-panel {
     &.vjs-control {

web/webpack.config.js

@@ -118,6 +118,7 @@ const webConfig = {
     filename: '[name].js',
     path: path.join(__dirname, 'dist/public/'),
     publicPath: '/public/',
+    chunkFilename: '[name]-[chunkhash].js',
   },
   devServer: {
     port: WEBPACK_WEB_PORT,