package.json

@@ -55,6 +55,7 @@
     "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",

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/router/view.jsx

@@ -6,6 +6,7 @@ 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';
 
@@ -219,7 +220,7 @@ function AppRouter(props: Props) {
   }
 
   return (
-    <React.Suspense fallback={<div>TODO.....................</div>}>
+    <React.Suspense fallback={<LoadingBarOneOff />}>
       <Switch>
         {/* @if TARGET='app' */}
         {welcomeVersion < WELCOME_VERSION && <Route path="/*" component={Welcome} />}

ui/modal/modalRouter/view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { withRouter } from 'react-router';
 import * as MODALS from 'constants/modal_types';
+import LoadingBarOneOff from 'component/loadingBarOneOff';
 
 const ModalAffirmPurchase = React.lazy(() => import('modal/modalAffirmPurchase' /* webpackChunkName: "modalAffirmPurchase" */));
 const ModalAutoGenerateThumbnail = React.lazy(() => import('modal/modalAutoGenerateThumbnail' /* webpackChunkName: "modalAutoGenerateThumbnail" */));
@@ -162,7 +163,7 @@ function ModalRouter(props: Props) {
   }
 
   return (
-    <React.Suspense fallback={null}>
+    <React.Suspense fallback={<LoadingBarOneOff />}>
       <SelectedModal {...modalProps} />
     </React.Suspense>
   );

yarn.lock

@@ -9736,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"