Feature: Progress Indicator for page loading (#248)

Fix one of the asks in #239

2 files changed, 15 insertions, 0 deletions

diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 1effcb628..b5887eba4 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -113,6 +113,9 @@ class ServiceView extends Component {
               !service.isServiceAccessRestricted && (
                 <WebviewLoader loaded={false} name={service.name} />
               )}
+            {service.isLoadingPage && !service.isFirstLoad && (
+                <WebviewLoader loaded={false} />
+            )}
             {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;
       }
     });