~ Initial Code Split (#6228)

package.json

@@ -20,6 +20,7 @@
   },
   "main": "./dist/electron/main.js",
   "scripts": {
+    "analyze": "source-map-explorer --only-mapped dist/electron/webpack/ui*.js --html dist/sourceMap.html",
     "compile:electron": "node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.electron.config.js",
     "compile:web": "yarn copyenv && cd web && node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --config webpack.config.js",
     "compile": "cross-env NODE_ENV=production yarn compile:electron && cross-env NODE_ENV=production yarn compile:web",
@@ -54,7 +55,9 @@
     "express": "^4.17.1",
     "if-env": "^1.0.4",
     "react-datetime-picker": "^3.2.1",
+    "react-top-loading-bar": "^2.0.1",
     "remove-markdown": "^0.3.0",
+    "source-map-explorer": "^2.5.2",
     "tempy": "^0.6.0",
     "videojs-logo": "^2.1.4"
   },

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,33 @@ import {
 } from 'web/effects/use-degraded-performance';
 // @endif
 import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
+
+const FileDrop = React.lazy(() => import('component/fileDrop' /* webpackChunkName: "secondary" */));
+const ModalRouter = React.lazy(() => import('modal/modalRouter' /* webpackChunkName: "secondary" */));
+const Nag = React.lazy(() => import('component/common/nag' /* webpackChunkName: "secondary" */));
+const NagContinueFirstRun = React.lazy(() =>
+  import('component/nagContinueFirstRun' /* webpackChunkName: "secondary" */)
+);
+const OpenInAppLink = React.lazy(() => import('web/component/openInAppLink' /* webpackChunkName: "secondary" */));
+
+// @if TARGET='web'
+const NagDataCollection = React.lazy(() =>
+  import('web/component/nag-data-collection' /* webpackChunkName: "secondary" */)
+);
+const NagDegradedPerformance = React.lazy(() =>
+  import('web/component/nag-degraded-performance' /* webpackChunkName: "secondary" */)
+);
+const NagNoUser = React.lazy(() => import('web/component/nag-no-user' /* webpackChunkName: "nag-no-user" */));
+const YoutubeWelcome = React.lazy(() =>
+  import('web/component/youtubeReferralWelcome' /* webpackChunkName: "secondary" */)
+);
+// @endif
+
+const SyncFatalError = React.lazy(() => import('component/syncFatalError' /* webpackChunkName: "syncFatalError" */));
+const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
+
+// ****************************************************************************
+
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
 export const IS_MAC = navigator.userAgent.indexOf('Mac OS X') !== -1;
 
@@ -377,11 +393,13 @@ function App(props: Props) {
 
   if (syncFatalError) {
     return (
+      <React.Suspense fallback={null}>
         <SyncFatalError
           // @if TARGET='web'
           lbryTvApiStatus={lbryTvApiStatus}
           // @endif
         />
+      </React.Suspense>
     );
   }
 
@@ -397,17 +415,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 +456,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,10 @@ 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 +257,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/common/tooltip.jsx

@@ -2,7 +2,7 @@
 import type { Node } from 'react';
 import React from 'react';
 import ReachTooltip from '@reach/tooltip';
-import '@reach/tooltip/styles.css';
+// import '@reach/tooltip/styles.css'; --> 'scss/third-party.scss'
 
 type Props = {
   label: string | Node,

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,12 @@ import ComicBookViewer from 'component/viewers/comicBookViewer';
 import ThreeViewer from 'component/viewers/threeViewer';
 // @endif
 
+const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "appViewer" */));
+const HtmlViewer = React.lazy(() => import('component/viewers/htmlViewer' /* webpackChunkName: "htmlViewer" */));
+const ImageViewer = React.lazy(() => import('component/viewers/imageViewer' /* webpackChunkName: "imageViewer" */));
+const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "pdfViewer" */));
+const VideoViewer = React.lazy(() => import('component/viewers/videoViewer' /* webpackChunkName: "videoViewer" */));
+
 type Props = {
   uri: string,
   streamingUrl: string,
@@ -85,17 +86,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 +126,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 +154,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/fileRenderInitiator/index.js

@@ -23,7 +23,7 @@ import FileRenderInitiator from './view';
 import { doAnaltyicsPurchaseEvent } from 'redux/actions/app';
 
 const select = (state, props) => ({
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+  claimThumbnail: makeSelectThumbnailForUri(props.uri)(state),
   fileInfo: makeSelectFileInfoForUri(props.uri)(state),
   obscurePreview: makeSelectShouldObscurePreview(props.uri)(state),
   isPlaying: makeSelectIsPlaying(props.uri)(state),

ui/component/fileRenderInitiator/view.jsx

@@ -9,7 +9,10 @@ import * as PAGES from 'constants/pages';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import Button from 'component/button';
 import isUserTyping from 'util/detect-typing';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
 import Nag from 'component/common/nag';
+// $FlowFixMe cannot resolve ...
+import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
 
 const SPACE_BAR_KEYCODE = 32;
 
@@ -23,7 +26,7 @@ type Props = {
   location: { search: ?string, pathname: string },
   obscurePreview: boolean,
   insufficientCredits: boolean,
-  thumbnail?: string,
+  claimThumbnail?: string,
   autoplay: boolean,
   hasCostInfo: boolean,
   costInfo: any,
@@ -45,7 +48,7 @@ export default function FileRenderInitiator(props: Props) {
     insufficientCredits,
     history,
     location,
-    thumbnail,
+    claimThumbnail,
     renderMode,
     hasCostInfo,
     costInfo,
@@ -68,6 +71,29 @@ export default function FileRenderInitiator(props: Props) {
   const fileStatus = fileInfo && fileInfo.status;
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
   const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
+  const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
+  const containerRef = React.useRef<any>();
+
+  React.useEffect(() => {
+    if (claimThumbnail) {
+      setTimeout(() => {
+        let newThumbnail = claimThumbnail;
+
+        // @if TARGET='web'
+        if (
+          containerRef.current &&
+          containerRef.current.parentElement &&
+          containerRef.current.parentElement.offsetWidth
+        ) {
+          const dimen = containerRef.current.parentElement.offsetWidth;
+          newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: dimen, height: dimen });
+        }
+        // @endif
+
+        setThumbnail(newThumbnail);
+      }, 200);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   function doAuthRedirect() {
     history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(location.pathname)}`);
@@ -131,8 +157,9 @@ export default function FileRenderInitiator(props: Props) {
 
   return (
     <div
+      ref={containerRef}
       onClick={disabled ? undefined : shouldRedirect ? doAuthRedirect : viewFile}
-      style={thumbnail && !obscurePreview && !autoplay ? { backgroundImage: `url("${thumbnail}")` } : {}}
+      style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
       className={classnames('content__cover', {
         'content__cover--disabled': disabled,
         'content__cover--theater-mode': videoTheaterMode,

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/loadingBarOneOff/index.js

@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import LoadingBarOneOff from './view';
+
+const select = (state, props) => ({});
+
+export default connect(select)(LoadingBarOneOff);

ui/component/loadingBarOneOff/view.jsx

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react';
+import LoadingBar from 'react-top-loading-bar';
+
+// TODO: Retrieve from CSS?
+export const COLOR_LOADING_BAR = '#2bbb90';
+
+function LoadingBarOneOff(props: any) {
+  const loadingBarRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (loadingBarRef.current) {
+      loadingBarRef.current.continuousStart();
+    }
+  }, []);
+
+  return <LoadingBar color={COLOR_LOADING_BAR} ref={loadingBarRef} />;
+}
+
+export default LoadingBarOneOff;

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: "secondary" */));
+
 export const MAIN_CLASS = 'main';
 type Props = {
   children: Node | Array<Node>,
@@ -126,7 +127,11 @@ 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,66 +1,84 @@
 // @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 LoadingBarOneOff from 'component/loadingBarOneOff';
+
+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: "secondary"
+const SignInPage = React.lazy(() => import('page/signIn' /* webpackChunkName: "secondary" */));
+const SignInWalletPasswordPage = React.lazy(() =>
+  import('page/signInWalletPassword' /* webpackChunkName: "secondary" */)
+);
+const SignUpPage = React.lazy(() => import('page/signUp' /* webpackChunkName: "secondary" */));
+const SignInVerifyPage = React.lazy(() => import('page/signInVerify' /* webpackChunkName: "secondary" */));
+
+// Chunk: "wallet/secondary"
+const BuyPage = React.lazy(() => import('page/buy' /* webpackChunkName: "secondary" */));
+const ReceivePage = React.lazy(() => import('page/receive' /* webpackChunkName: "secondary" */));
+const SendPage = React.lazy(() => import('page/send' /* webpackChunkName: "secondary" */));
+const SwapPage = React.lazy(() => import('page/swap' /* webpackChunkName: "secondary" */));
+const WalletPage = React.lazy(() => import('page/wallet' /* webpackChunkName: "secondary" */));
+
+// Chunk: none
+const NotificationsPage = React.lazy(() => import('page/notifications' /* webpackChunkName: "secondary" */));
+const CollectionPage = React.lazy(() => import('page/collection' /* webpackChunkName: "secondary" */));
+const ChannelNew = React.lazy(() => import('page/channelNew' /* webpackChunkName: "secondary" */));
+const ChannelsFollowingDiscoverPage = React.lazy(() =>
+  import('page/channelsFollowingDiscover' /* webpackChunkName: "secondary" */)
+);
+const ChannelsFollowingPage = React.lazy(() => import('page/channelsFollowing' /* webpackChunkName: "secondary" */));
+const ChannelsPage = React.lazy(() => import('page/channels' /* webpackChunkName: "secondary" */));
+const CheckoutPage = React.lazy(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */));
+const CreatorDashboard = React.lazy(() => import('page/creatorDashboard' /* webpackChunkName: "secondary" */));
+const DiscoverPage = React.lazy(() => import('page/discover' /* webpackChunkName: "secondary" */));
+const EmbedWrapperPage = React.lazy(() => import('page/embedWrapper' /* webpackChunkName: "secondary" */));
+const FileListPublished = React.lazy(() => import('page/fileListPublished' /* webpackChunkName: "secondary" */));
+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: "secondary" */));
+const InvitedPage = React.lazy(() => import('page/invited' /* webpackChunkName: "secondary" */));
+const LibraryPage = React.lazy(() => import('page/library' /* webpackChunkName: "secondary" */));
+const ListBlockedPage = React.lazy(() => import('page/listBlocked' /* webpackChunkName: "secondary" */));
+const ListsPage = React.lazy(() => import('page/lists' /* webpackChunkName: "secondary" */));
+const LiveStreamSetupPage = React.lazy(() => import('page/livestreamSetup' /* webpackChunkName: "secondary" */));
+const LivestreamCurrentPage = React.lazy(() => import('page/livestreamCurrent' /* webpackChunkName: "secondary" */));
+const PasswordResetPage = React.lazy(() => import('page/passwordReset' /* webpackChunkName: "secondary" */));
+const PasswordSetPage = React.lazy(() => import('page/passwordSet' /* webpackChunkName: "secondary" */));
+const PublishPage = React.lazy(() => import('page/publish' /* webpackChunkName: "secondary" */));
+const ReportContentPage = React.lazy(() => import('page/reportContent' /* webpackChunkName: "secondary" */));
+const ReportPage = React.lazy(() => import('page/report' /* webpackChunkName: "secondary" */));
+const RepostNew = React.lazy(() => import('page/repost' /* webpackChunkName: "secondary" */));
+const RewardsPage = React.lazy(() => import('page/rewards' /* webpackChunkName: "secondary" */));
+const RewardsVerifyPage = React.lazy(() => import('page/rewardsVerify' /* webpackChunkName: "secondary" */));
+const SearchPage = React.lazy(() => import('page/search' /* webpackChunkName: "secondary" */));
+const SettingsAdvancedPage = React.lazy(() => import('page/settingsAdvanced' /* webpackChunkName: "secondary" */));
+const SettingsCreatorPage = React.lazy(() => import('page/settingsCreator' /* webpackChunkName: "secondary" */));
+const SettingsNotificationsPage = React.lazy(() =>
+  import('page/settingsNotifications' /* webpackChunkName: "secondary" */)
+);
+const SettingsPage = React.lazy(() => import('page/settings' /* webpackChunkName: "secondary" */));
+const ShowPage = React.lazy(() => import('page/show' /* webpackChunkName: "secondary" */));
+const TagsFollowingManagePage = React.lazy(() =>
+  import('page/tagsFollowingManage' /* webpackChunkName: "secondary" */)
+);
+const TagsFollowingPage = React.lazy(() => import('page/tagsFollowing' /* webpackChunkName: "secondary" */));
+const TopPage = React.lazy(() => import('page/top' /* webpackChunkName: "secondary" */));
+const Welcome = React.lazy(() => import('page/welcome' /* webpackChunkName: "secondary" */));
+const YoutubeSyncPage = React.lazy(() => import('page/youtubeSync' /* webpackChunkName: "secondary" */));
 
 // Tell the browser we are handling scroll restoration
 if ('scrollRestoration' in history) {
@@ -210,6 +228,7 @@ function AppRouter(props: Props) {
   }
 
   return (
+    <React.Suspense fallback={<LoadingBarOneOff />}>
       <Switch>
         {/* @if TARGET='app' */}
         {welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}
@@ -308,6 +327,7 @@ function AppRouter(props: Props) {
         <Route path="/:claimName/:streamName" exact component={ShowPage} />
         <Route path="/*" component={FourOhFourPage} />
       </Switch>
+    </React.Suspense>
   );
 }
 

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -4,7 +4,7 @@ import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 import classnames from 'classnames';
 import videojs from 'video.js/dist/video.min.js';
-import 'video.js/dist/alt/video-js-cdn.min.css';
+// import 'video.js/dist/alt/video-js-cdn.min.css'; --> 'scss/third-party.scss'
 import eventTracking from 'videojs-event-tracking';
 import * as OVERLAY from './overlays';
 import './plugins/videojs-mobile-ui/plugin';

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,13 @@
 // @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: "secondary" */)
+);
 
 type Props = {
   doOpenMobileSearch: (any) => void,
@@ -18,13 +22,27 @@ export default function WunderBar(props: Props) {
   const isMobile = useIsMobile();
 
   return isMobile ? (
-    <Button icon={ICONS.SEARCH} className="wunderbar__mobile-search" onClick={() => doOpenMobileSearch({ ...props })} />
+    <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/component/wunderbarSuggestions/view.jsx

@@ -8,7 +8,7 @@ import classnames from 'classnames';
 import Icon from 'component/common/icon';
 import { isURIValid, normalizeURI, parseURI } from 'lbry-redux';
 import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList, ComboboxOption } from '@reach/combobox';
-import '@reach/combobox/styles.css';
+// import '@reach/combobox/styles.css'; --> 'scss/third-party.scss'
 import useLighthouse from 'effects/use-lighthouse';
 import { Form } from 'component/common/form';
 import Button from 'component/button';

ui/constants/classnames.js

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

ui/index.jsx

@@ -37,6 +37,9 @@ import {
 import { X_LBRY_AUTH_TOKEN } from 'constants/token';
 import { LBRY_WEB_API, DEFAULT_LANGUAGE, LBRY_API_URL } from 'config';
 
+// Import 3rd-party styles before ours for the current way we are code-splitting.
+import 'scss/third-party.scss';
+
 // Import our app styles
 // If a style is not necessary for the initial page load, it should be removed from `all.scss`
 // and loaded dynamically in the component that consumes it
@@ -73,7 +76,7 @@ Lbry.setDaemonConnectionString(proxyURL);
 
 Lbry.setOverride(
   'publish',
-  params =>
+  (params) =>
     new Promise((resolve, reject) => {
       apiPublishCallViaWeb(
         apiCall,
@@ -117,7 +120,7 @@ doAuthTokenRefresh();
 // We keep a local variable for authToken because `ipcRenderer.send` does not
 // contain a response, so there is no way to know when it's been set
 let authToken;
-Lbryio.setOverride('setAuthToken', authToken => {
+Lbryio.setOverride('setAuthToken', (authToken) => {
   setAuthToken(authToken);
   return authToken;
 });
@@ -125,7 +128,7 @@ Lbryio.setOverride('setAuthToken', authToken => {
 Lbryio.setOverride(
   'getAuthToken',
   () =>
-    new Promise(resolve => {
+    new Promise((resolve) => {
       const authTokenToReturn = authToken || getAuthToken();
       resolve(authTokenToReturn);
     })
@@ -135,7 +138,7 @@ rewards.setCallback('claimFirstRewardSuccess', () => {
   app.store.dispatch(doOpenModal(MODALS.FIRST_REWARD));
 });
 
-rewards.setCallback('claimRewardSuccess', reward => {
+rewards.setCallback('claimRewardSuccess', (reward) => {
   if (reward && reward.type === rewards.TYPE_REWARD_CODE) {
     app.store.dispatch(doHideModal());
   }
@@ -195,11 +198,11 @@ ipcRenderer.on('devtools-is-opened', () => {
 
 // Force exit mode for html5 fullscreen api
 // See: https://github.com/electron/electron/issues/18188
-remote.getCurrentWindow().on('leave-full-screen', event => {
+remote.getCurrentWindow().on('leave-full-screen', (event) => {
   document.webkitExitFullscreen();
 });
 
-document.addEventListener('click', event => {
+document.addEventListener('click', (event) => {
   let { target } = event;
 
   while (target && target !== document) {
@@ -213,10 +216,10 @@ document.addEventListener('click', event => {
 });
 // @endif
 
-document.addEventListener('dragover', event => {
+document.addEventListener('dragover', (event) => {
   event.preventDefault();
 });
-document.addEventListener('drop', event => {
+document.addEventListener('drop', (event) => {
   event.preventDefault();
 });
 
@@ -229,7 +232,7 @@ function AppWrapper() {
     // @if TARGET='app'
     moment.locale(remote.app.getLocale());
 
-    autoUpdater.on('error', error => {
+    autoUpdater.on('error', (error) => {
       console.error(error.message); // eslint-disable-line no-console
     });
 

ui/modal/modalRouter/view.jsx

@@ -2,46 +2,94 @@
 import React from 'react';
 import { withRouter } from 'react-router';
 import * as MODALS from 'constants/modal_types';
-import ModalError from 'modal/modalError';
+import LoadingBarOneOff from 'component/loadingBarOneOff';
-import ModalDownloading from 'modal/modalDownloading';
+
-import ModalAutoGenerateThumbnail from 'modal/modalAutoGenerateThumbnail';
+const ModalAffirmPurchase = React.lazy(() =>
-import ModalAutoUpdateDownloaded from 'modal/modalAutoUpdateDownloaded';
+  import('modal/modalAffirmPurchase' /* webpackChunkName: "modalAffirmPurchase" */)
-import ModalUpgrade from 'modal/modalUpgrade';
+);
-import ModalFirstReward from 'modal/modalFirstReward';
+const ModalAutoGenerateThumbnail = React.lazy(() =>
-import ModalRemoveFile from 'modal/modalRemoveFile';
+  import('modal/modalAutoGenerateThumbnail' /* webpackChunkName: "modalAutoGenerateThumbnail" */)
-import ModalTransactionFailed from 'modal/modalTransactionFailed';
+);
-import ModalFileTimeout from 'modal/modalFileTimeout';
+const ModalAutoUpdateDownloaded = React.lazy(() =>
-import ModalAffirmPurchase from 'modal/modalAffirmPurchase';
+  import('modal/modalAutoUpdateDownloaded' /* webpackChunkName: "modalAutoUpdateDownloaded" */)
-import ModalRevokeClaim from 'modal/modalRevokeClaim';
+);
-import ModalPhoneCollection from 'modal/modalPhoneCollection';
+const ModalClaimCollectionAdd = React.lazy(() =>
-import ModalFirstSubscription from 'modal/modalFirstSubscription';
+  import('modal/modalClaimCollectionAdd' /* webpackChunkName: "modalClaimCollectionAdd" */)
-import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
+);
-import ModalSocialShare from 'modal/modalSocialShare';
+const ModalCommentAcknowledgement = React.lazy(() =>
-import ModalSendTip from 'modal/modalSendTip';
+  import('modal/modalCommentAcknowledgement' /* webpackChunkName: "modalCommentAcknowledgement" */)
-import ModalPublish from 'modal/modalPublish';
+);
-import ModalPublishPreview from 'modal/modalPublishPreview';
+const ModalConfirmAge = React.lazy(() => import('modal/modalConfirmAge' /* webpackChunkName: "modalConfirmAge" */));
-import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
+const ModalConfirmThumbnailUpload = React.lazy(() =>
-import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
+  import('modal/modalConfirmThumbnailUpload' /* webpackChunkName: "modalConfirmThumbnailUpload" */)
-import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
+);
-import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
+const ModalConfirmTransaction = React.lazy(() =>
-import ModalWalletUnlock from 'modal/modalWalletUnlock';
+  import('modal/modalConfirmTransaction' /* webpackChunkName: "modalConfirmTransaction" */)
-import ModalRewardCode from 'modal/modalRewardCode';
+);
-import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
+const ModalDeleteCollection = React.lazy(() =>
-import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
+  import('modal/modalRemoveCollection' /* webpackChunkName: "modalRemoveCollection" */)
-import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
+);
-import ModalSetReferrer from 'modal/modalSetReferrer';
+const ModalDownloading = React.lazy(() => import('modal/modalDownloading' /* webpackChunkName: "modalDownloading" */));
-import ModalSignOut from 'modal/modalSignOut';
+const ModalError = React.lazy(() => import('modal/modalError' /* webpackChunkName: "modalError" */));
-import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
+const ModalFileSelection = React.lazy(() =>
-import ModalConfirmAge from 'modal/modalConfirmAge';
+  import('modal/modalFileSelection' /* webpackChunkName: "modalFileSelection" */)
-import ModalFileSelection from 'modal/modalFileSelection';
+);
-import ModalSyncEnable from 'modal/modalSyncEnable';
+const ModalFileTimeout = React.lazy(() => import('modal/modalFileTimeout' /* webpackChunkName: "modalFileTimeout" */));
-import ModalImageUpload from 'modal/modalImageUpload';
+const ModalFirstReward = React.lazy(() => import('modal/modalFirstReward' /* webpackChunkName: "modalFirstReward" */));
-import ModalMobileSearch from 'modal/modalMobileSearch';
+const ModalFirstSubscription = React.lazy(() =>
-import ModalViewImage from 'modal/modalViewImage';
+  import('modal/modalFirstSubscription' /* webpackChunkName: "modalFirstSubscription" */)
-import ModalMassTipsUnlock from 'modal/modalMassTipUnlock';
+);
-import ModalRemoveBtcSwapAddress from 'modal/modalRemoveBtcSwapAddress';
+const ModalImageUpload = React.lazy(() => import('modal/modalImageUpload' /* webpackChunkName: "modalImageUpload" */));
-import ModalClaimCollectionAdd from 'modal/modalClaimCollectionAdd';
+const ModalMassTipsUnlock = React.lazy(() =>
-import ModalDeleteCollection from 'modal/modalRemoveCollection';
+  import('modal/modalMassTipUnlock' /* webpackChunkName: "modalMassTipUnlock" */)
+);
+const ModalMobileSearch = React.lazy(() =>
+  import('modal/modalMobileSearch' /* webpackChunkName: "modalMobileSearch" */)
+);
+const ModalOpenExternalResource = React.lazy(() =>
+  import('modal/modalOpenExternalResource' /* webpackChunkName: "modalOpenExternalResource" */)
+);
+const ModalPasswordUnsave = React.lazy(() =>
+  import('modal/modalPasswordUnsave' /* webpackChunkName: "modalPasswordUnsave" */)
+);
+const ModalPhoneCollection = React.lazy(() =>
+  import('modal/modalPhoneCollection' /* webpackChunkName: "modalPhoneCollection" */)
+);
+const ModalPublish = React.lazy(() => import('modal/modalPublish' /* webpackChunkName: "modalPublish" */));
+const ModalPublishPreview = React.lazy(() =>
+  import('modal/modalPublishPreview' /* webpackChunkName: "modalPublishPreview" */)
+);
+const ModalRemoveBtcSwapAddress = React.lazy(() =>
+  import('modal/modalRemoveBtcSwapAddress' /* webpackChunkName: "modalRemoveBtcSwapAddress" */)
+);
+const ModalRemoveFile = React.lazy(() => import('modal/modalRemoveFile' /* webpackChunkName: "modalRemoveFile" */));
+const ModalRevokeClaim = React.lazy(() => import('modal/modalRevokeClaim' /* webpackChunkName: "modalRevokeClaim" */));
+const ModalRewardCode = React.lazy(() => import('modal/modalRewardCode' /* webpackChunkName: "modalRewardCode" */));
+const ModalSendTip = React.lazy(() => import('modal/modalSendTip' /* webpackChunkName: "modalSendTip" */));
+const ModalSetReferrer = React.lazy(() => import('modal/modalSetReferrer' /* webpackChunkName: "modalSetReferrer" */));
+const ModalSignOut = React.lazy(() => import('modal/modalSignOut' /* webpackChunkName: "modalSignOut" */));
+const ModalSocialShare = React.lazy(() => import('modal/modalSocialShare' /* webpackChunkName: "modalSocialShare" */));
+const ModalSupportsLiquidate = React.lazy(() =>
+  import('modal/modalSupportsLiquidate' /* webpackChunkName: "modalSupportsLiquidate" */)
+);
+const ModalSyncEnable = React.lazy(() => import('modal/modalSyncEnable' /* webpackChunkName: "modalSyncEnable" */));
+const ModalTransactionFailed = React.lazy(() =>
+  import('modal/modalTransactionFailed' /* webpackChunkName: "modalTransactionFailed" */)
+);
+const ModalUpgrade = React.lazy(() => import('modal/modalUpgrade' /* webpackChunkName: "modalUpgrade" */));
+const ModalViewImage = React.lazy(() => import('modal/modalViewImage' /* webpackChunkName: "modalViewImage" */));
+const ModalWalletDecrypt = React.lazy(() =>
+  import('modal/modalWalletDecrypt' /* webpackChunkName: "modalWalletDecrypt" */)
+);
+const ModalWalletEncrypt = React.lazy(() =>
+  import('modal/modalWalletEncrypt' /* webpackChunkName: "modalWalletEncrypt" */)
+);
+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 +114,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={<LoadingBarOneOff />}>
+      <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/home/view.jsx

@@ -6,9 +6,11 @@ import React from 'react';
 import Page from 'component/page';
 import Button from 'component/button';
 import ClaimTilesDiscover from 'component/claimTilesDiscover';
+import ClaimPreviewTile from 'component/claimPreviewTile';
 import Icon from 'component/common/icon';
 import I18nMessage from 'component/i18nMessage';
 import LbcSymbol from 'component/common/lbc-symbol';
+import WaitUntilOnPage from 'component/common/wait-until-on-page';
 import useGetLivestreams from 'effects/use-get-livestreams';
 
 type Props = {
@@ -37,6 +39,48 @@ function HomePage(props: Props) {
     showNsfw
   );
 
+  function getRowElements(title, route, link, icon, help, options, index) {
+    const tilePlaceholder = (
+      <ul className="claim-grid">
+        {new Array(options.pageSize || 8).fill(1).map((x, i) => (
+          <ClaimPreviewTile key={i} placeholder />
+        ))}
+      </ul>
+    );
+    const claimTiles = <ClaimTilesDiscover {...options} liveLivestreamsFirst livestreamMap={livestreamMap} hasSource />;
+
+    return (
+      <div key={title} className="claim-grid__wrapper">
+        {index !== 0 && title && typeof title === 'string' && (
+          <h1 className="claim-grid__header">
+            <Button navigate={route || link} button="link">
+              {icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
+              <span className="claim-grid__title">{__(title)}</span>
+              {help}
+            </Button>
+          </h1>
+        )}
+
+        {index === 0 && <>{claimTiles}</>}
+        {index !== 0 && (
+          <WaitUntilOnPage name={title} placeholder={tilePlaceholder}>
+            {claimTiles}
+          </WaitUntilOnPage>
+        )}
+
+        {(route || link) && (
+          <Button
+            className="claim-grid__title--secondary"
+            button="link"
+            navigate={route || link}
+            iconRight={ICONS.ARROW_RIGHT}
+            label={__('View More')}
+          />
+        )}
+      </div>
+    );
+  }
+
   return (
     <Page fullWidthPage>
       {IS_WEB && DOMAIN === 'lbry.tv' && (
@@ -81,30 +125,9 @@ function HomePage(props: Props) {
           </p>
         </div>
       )}
-      {rowData.map(({ title, route, link, icon, help, options = {} }, index) => (
+      {rowData.map(({ title, route, link, icon, help, options = {} }, index) => {
-        <div key={title} className="claim-grid__wrapper">
+        return getRowElements(title, route, link, icon, help, options, index);
-          {index !== 0 && title && typeof title === 'string' && (
+      })}
-            <h1 className="claim-grid__header">
-              <Button navigate={route || link} button="link">
-                {icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
-                <span className="claim-grid__title">{__(title)}</span>
-                {help}
-              </Button>
-            </h1>
-          )}
-
-          <ClaimTilesDiscover {...options} liveLivestreamsFirst livestreamMap={livestreamMap} hasSource />
-          {(route || link) && (
-            <Button
-              className="claim-grid__title--secondary"
-              button="link"
-              navigate={route || link}
-              iconRight={ICONS.ARROW_RIGHT}
-              label={__('View More')}
-            />
-          )}
-        </div>
-      ))}
     </Page>
   );
 }

ui/page/show/view.jsx

@@ -5,16 +5,19 @@ 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 +160,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 +203,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 {

ui/scss/third-party.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+@import '~@reach/combobox/styles.css';
+@import '~@reach/tooltip/styles.css';
+@import '~video.js/dist/alt/video-js-cdn.min.css';

web/middleware/cache-control.js

@@ -10,6 +10,7 @@ const STATIC_ASSET_PATHS = [
   '/public/font/v1/700i.woff',
   '/public/favicon.png',
   '/public/img/busy.gif',
+  '/public/img/fileRenderPlaceholder.gif',
   '/public/img/gerbil-happy.png',
   '/public/img/gerbil-sad.png',
   '/public/img/placeholder.png',

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,

yarn.lock

@@ -2755,6 +2755,11 @@ btoa-lite@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
 
+btoa@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
+  integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==
+
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
@@ -4316,6 +4321,11 @@ duplexer@^0.1.1, duplexer@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@@ -4703,7 +4713,7 @@ escape-goat@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
@@ -5665,6 +5675,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.6:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-agent@^2.0.2:
   version "2.1.12"
   resolved "https://registry.yarnpkg.com/global-agent/-/global-agent-2.1.12.tgz#e4ae3812b731a9e81cbf825f9377ef450a8e4195"
@@ -5856,6 +5878,13 @@ gzip-size@^5.0.0:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@@ -6627,6 +6656,11 @@ is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
 
+is-docker@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -6877,6 +6911,13 @@ is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
 
+is-wsl@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
 is-yarn-global@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
@@ -7434,7 +7475,7 @@ lodash.unset@^4.5.2:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
 
-lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.6.1:
+lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.6.1:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -8357,6 +8398,14 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+open@^7.3.1:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 opencollective-postinstall@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
@@ -9687,6 +9736,11 @@ react-time-picker@^4.2.0:
     react-fit "^1.0.3"
     update-input-width "^1.1.1"
 
+react-top-loading-bar@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-top-loading-bar/-/react-top-loading-bar-2.0.1.tgz#c8805ad9c1068766fdd3cadd414e67cfdf1878e9"
+  integrity sha512-wkRlK9Rte4TU817GDcjlsCoDOxrrnvsNvK609FKyio0EIrmmqjQDz5DB8HbN88CHNZBy5Lh/OBALc03ioWFPuQ==
+
 react@^16.8.2:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
@@ -10194,7 +10248,7 @@ rimraf@2, rimraf@^2.2.8, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.
   dependencies:
     glob "^7.1.3"
 
-rimraf@2.6.3:
+rimraf@2.6.3, rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   dependencies:
@@ -10661,6 +10715,24 @@ source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
 
+source-map-explorer@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-2.5.2.tgz#857cab5dd9d1d7175e9c5c2739dc9ccfb99f2dc5"
+  integrity sha512-gBwOyCcHPHcdLbgw6Y6kgoH1uLKL6hN3zz0xJcNI2lpnElZliIlmSYAjUVwAWnc7+HscoTyh1ScR7ITtFuEnxg==
+  dependencies:
+    btoa "^1.2.1"
+    chalk "^4.1.0"
+    convert-source-map "^1.7.0"
+    ejs "^3.1.5"
+    escape-html "^1.0.3"
+    glob "^7.1.6"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    open "^7.3.1"
+    source-map "^0.7.3"
+    temp "^0.9.4"
+    yargs "^16.2.0"
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -11170,6 +11242,14 @@ temp-file@^3.3.7:
     async-exit-hook "^2.0.1"
     fs-extra "^8.1.0"
 
+temp@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/temp/-/temp-0.9.4.tgz#cd20a8580cb63635d0e4e9d4bd989d44286e7620"
+  integrity sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==
+  dependencies:
+    mkdirp "^0.5.1"
+    rimraf "~2.6.2"
+
 tempy@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.6.0.tgz#65e2c35abc06f1124a97f387b08303442bde59f3"
@@ -12474,6 +12554,11 @@ y18n@^5.0.2:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.3.tgz#978115b82befe2b5c762bf55980b7b01a4a2d5d9"
   integrity sha512-JeFbcHQ/7hVmMBXW6UB6Tg7apStHd/ztGz1JN78y3pFi/q0Ht1eA6PVkvw56gm7UA8fcJR/ziRlYEDMGoju0yQ==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yaku@^0.16.6:
   version "0.16.7"
   resolved "https://registry.yarnpkg.com/yaku/-/yaku-0.16.7.tgz#1d195c78aa9b5bf8479c895b9504fd4f0847984e"
@@ -12622,6 +12707,19 @@ yargs@^16.0.3:
     y18n "^5.0.2"
     yargs-parser "^20.2.2"
 
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yarnhook@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/yarnhook/-/yarnhook-0.2.0.tgz#291e49db6066df2d8f745087c407362042a0d055"