From 9b052c5345054a0f1cc879f795fd71e97a79c83e Mon Sep 17 00:00:00 2001
From: Vijay Aravamudhan <vraravam@users.noreply.github.com>
Date: Fri, 17 Jun 2022 22:53:25 +0530
Subject: Add a less-obstrusive progress bar on top of the Ferdium window
 (#285)

---
 src/app.js                                     | 15 +++++++++++++--
 src/components/services/content/ServiceView.js |  6 +++++-
 src/models/Service.js                          | 12 ++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

(limited to 'src')

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;
       }
     });
 
-- 
cgit v1.2.3-54-g00ecf