From 9980fee785419e2231fa495013b979e0cd9f62e3 Mon Sep 17 00:00:00 2001
From: Abhigyan Khaund <mail@abhigyan.xyz>
Date: Tue, 8 May 2018 00:41:20 +0530
Subject: [PATCH] loading-indicator: Fix loading indicator when server is
 loaded.

This PR changes the current implementation of the loading indicator by attaching
the indicator to the right dom element, so that it doesn't show up once a server
is loaded.

Fixes: #482.
---
 app/renderer/css/main.css             | 22 +++++++++++++++++++---
 app/renderer/js/components/webview.js | 15 +++++++++++++--
 app/renderer/js/main.js               |  6 ++++++
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/app/renderer/css/main.css b/app/renderer/css/main.css
index 18def44d..4982e489 100644
--- a/app/renderer/css/main.css
+++ b/app/renderer/css/main.css
@@ -13,9 +13,6 @@ body {
 #content {
     display: flex;
     height: 100%;
-    background: #fff url(../img/ic_loading.gif) no-repeat;
-    background-size: 60px 60px;
-    background-position: center;
 }
 
 .toggle-sidebar {
@@ -273,6 +270,25 @@ body {
     width: 100%;
 }
 
+/*Pseudo element for loading indicator*/
+#webviews-container::before {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    background: #fff url(../img/ic_loading.gif) no-repeat;
+    background-size: 60px 60px;
+    background-position: center;
+    width: 100%;
+    height: 100%;
+}
+
+/*When the active webview is loaded*/
+#webviews-container.loaded::before {
+    opacity: 0;
+    z-index: -1;
+    visibility: hidden;
+}
+
 webview {
     /* transition: opacity 0.3s ease-in; */
     flex-grow: 1;
diff --git a/app/renderer/js/components/webview.js b/app/renderer/js/components/webview.js
index a5369856..4efe6d2a 100644
--- a/app/renderer/js/components/webview.js
+++ b/app/renderer/js/components/webview.js
@@ -18,9 +18,10 @@ class WebView extends BaseComponent {
 		this.props = props;
 
 		this.zoomFactor = 1.0;
-		this.loading = false;
+		this.loading = true;
 		this.badgeCount = 0;
 		this.customCSS = ConfigUtil.getConfigItem('customCSS');
+		this.$webviewsContainer = document.querySelector('#webviews-container').classList;
 	}
 
 	template() {
@@ -86,6 +87,7 @@ class WebView extends BaseComponent {
 			if (this.props.role === 'server') {
 				this.$el.classList.add('onload');
 			}
+			this.loading = false;
 			this.show();
 		});
 
@@ -119,6 +121,13 @@ class WebView extends BaseComponent {
 			return;
 		}
 
+		// To show or hide the loading indicator in the the active tab
+		if (this.loading) {
+			this.$webviewsContainer.remove('loaded');
+		} else {
+			this.$webviewsContainer.add('loaded');
+		}
+
 		this.$el.classList.remove('disabled');
 		this.$el.classList.add('active');
 		setTimeout(() => {
@@ -127,7 +136,6 @@ class WebView extends BaseComponent {
 			}
 		}, 1000);
 		this.focus();
-		this.loading = false;
 		this.props.onTitleChange();
 		// Injecting preload css in webview to override some css rules
 		this.$el.insertCSS(fs.readFileSync(path.join(__dirname, '/../../css/preload.css'), 'utf8'));
@@ -220,6 +228,9 @@ class WebView extends BaseComponent {
 
 	reload() {
 		this.hide();
+		// Shows the loading indicator till the webview is reloaded
+		this.$webviewsContainer.remove('loaded');
+		this.loading = true;
 		this.$el.reload();
 	}
 
diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js
index 732b4c49..b47313f2 100644
--- a/app/renderer/js/main.js
+++ b/app/renderer/js/main.js
@@ -272,6 +272,9 @@ class ServerManagerView {
 				preload: false
 			})
 		}));
+		// To show loading indicator the first time a functional tab is opened, indicator is
+		// closed when the functional tab DOM is ready, handled in webview.js
+		this.$webviewsContainer.classList.remove('loaded');
 		this.activateTab(this.functionalTabs[tabProps.name]);
 	}
 
@@ -386,6 +389,9 @@ class ServerManagerView {
 	}
 
 	destroyView() {
+		// Show loading indicator
+		this.$webviewsContainer.classList.remove('loaded');
+
 		// Clear global variables
 		this.activeTabIndex = -1;
 		this.tabs = [];