Add a less-obstrusive progress bar on top of the Ferdium window (#285)

5 files changed, 61 insertions, 3 deletions

diff --git a/package-lock.json b/package-lock.json
index ce6f8a8fa..107e87266 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,6 +73,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",
@@ -22604,6 +22605,17 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/react-topbar-progress-indicator": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz",
+      "integrity": "sha512-Oy3ENNKfymt16zoz5SYy/WOepMurB0oeZEyvuHm8JZ3jrTCe1oAUD7fG6HhYt5sg8Wcg5gdkzSWItaFF6c6VhA==",
+      "dependencies": {
+        "topbar": "^0.1.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
@@ -26021,6 +26033,11 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/topbar": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/topbar/-/topbar-0.1.4.tgz",
+      "integrity": "sha512-P3n4WnN4GFd2mQXDo30rQmsAGe4V1bVkggtTreSbNyL50Fyc+eVkW5oatSLeGQmJoan2TLIgoXUZypN+6nw4MQ=="
+    },
     "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -45957,6 +45974,14 @@
         }
       }
     },
+    "react-topbar-progress-indicator": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz",
+      "integrity": "sha512-Oy3ENNKfymt16zoz5SYy/WOepMurB0oeZEyvuHm8JZ3jrTCe1oAUD7fG6HhYt5sg8Wcg5gdkzSWItaFF6c6VhA==",
+      "requires": {
+        "topbar": "^0.1.3"
+      }
+    },
     "react-transition-group": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
@@ -48692,6 +48717,11 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
+    "topbar": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/topbar/-/topbar-0.1.4.tgz",
+      "integrity": "sha512-P3n4WnN4GFd2mQXDo30rQmsAGe4V1bVkggtTreSbNyL50Fyc+eVkW5oatSLeGQmJoan2TLIgoXUZypN+6nw4MQ=="
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
diff --git a/package.json b/package.json
index 84fedabc7..6c99d962d 100644
--- a/package.json
+++ b/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",
diff --git a/src/app.js b/src/app.js
index c56cda241..aa140832c 100644
--- a/src/app.js
+++ b/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
+});
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 1effcb628..39f1176f3 100644
--- a/src/components/services/content/ServiceView.js
+++ b/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}
diff --git a/src/models/Service.js b/src/models/Service.js
index e2b9ae7c6..ae13a063d 100644
--- a/src/models/Service.js
+++ b/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;
       }
     });