Add a less-obstrusive progress bar on top of the Ferdium window

package.json

@@ -108,6 +108,7 @@
     "react-router": "3.2.6",
     "react-sortable-hoc": "2.0.0",
     "react-tooltip": "4.2.21",
+    "react-topbar-progress-indicator": "4.1.1",
     "route-parser": "0.0.5",
     "semver": "7.3.7",
     "sqlite3": "5.0.8",

src/app.js

@@ -4,6 +4,7 @@ import { render } from 'react-dom';
 import { Provider } from 'mobx-react';
 import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
 import { hashHistory } from 'react-router';
+import TopBarProgress from 'react-topbar-progress-indicator';
 
 import ServerApi from './api/server/ServerApi';
 import LocalApi from './api/server/LocalApi';
@@ -53,8 +54,8 @@ window.addEventListener('load', () => {
 // TODO: send this request to the recipe.js
 window.addEventListener('mouseup', e => {
   if (e.button === 3 || e.button === 4) {
-      e.preventDefault()
-      e.stopPropagation()
+    e.preventDefault()
+    e.stopPropagation()
   }
 });
 
@@ -63,3 +64,13 @@ window.addEventListener('dragover', event => event.preventDefault());
 window.addEventListener('drop', event => event.preventDefault());
 window.addEventListener('dragover', event => event.stopPropagation());
 window.addEventListener('drop', event => event.stopPropagation());
+
+TopBarProgress.config({
+  barThickness: 4,
+  barColors: {
+    '0': '#f00',
+    '0.5': '#0f0',
+    '1.0': '#00f',
+  },
+  shadowBlur: 5
+});

src/components/services/content/ServiceView.js

@@ -1,9 +1,10 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { Component, Fragment } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
+import TopBarProgress from 'react-topbar-progress-indicator';
 
 import ServiceModel from '../../../models/Service';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
@@ -113,6 +114,9 @@ class ServiceView extends Component {
               !service.isServiceAccessRestricted && (
                 <WebviewLoader loaded={false} name={service.name} />
               )}
+            {service.isLoadingPage && !service.isFirstLoad && (
+                <TopBarProgress />
+            )}
             {service.isError && (
               <WebviewErrorHandler
                 name={service.recipe.name}

src/models/Service.js

@@ -74,6 +74,8 @@ export default class Service {
 
   @observable isLoading = true;
 
+  @observable isLoadingPage = true;
+
   @observable isError = false;
 
   @observable errorMessage = '';
@@ -383,11 +385,20 @@ export default class Service {
 
       this.hasCrashed = false;
       this.isLoading = true;
+      this.isLoadingPage = true;
       this.isError = false;
     });
 
+    this.webview.addEventListener('did-stop-loading', event => {
+      debug('Did stop load', this.name, event);
+
+      this.isLoading = false;
+      this.isLoadingPage = false;
+    });
+
     const didLoad = () => {
       this.isLoading = false;
+      this.isLoadingPage = false;
 
       if (!this.isError) {
         this.isFirstLoad = false;
@@ -407,6 +418,7 @@ export default class Service {
         this.isError = true;
         this.errorMessage = event.errorDescription;
         this.isLoading = false;
+        this.isLoadingPage = false;
       }
     });