sidebar: Add loading indicator.

* Browser-like loading indicator added to the sidebar.
Shows when the app is loading a page. Inactive once the user starts
navigating on the webpage, and in settings.

* Add tooltip saying "Loading" to indicator.

Fixes #430.

app/renderer/css/main.css

@@ -267,6 +267,18 @@ body {
     margin-bottom: 5px;
 }
 
+.refresh {
+    animation: rotate-loader 1s linear infinite;
+}
+
+@keyframes rotate-loader {
+    from {
+        transform: rotate(0);
+    }
+    to {
+        transform: rotate(-360deg);
+    }
+}
 
 /*******************
   *   Webview Area  *
@@ -328,6 +340,7 @@ webview.focus {
 
 /* Tooltip styling */
 
+#loading-tooltip,
 #dnd-tooltip,
 #back-tooltip,
 #reload-tooltip,
@@ -346,6 +359,7 @@ webview.focus {
     font-size: 14px;
 }
 
+#loading-tooltip::after,
 #dnd-tooltip::after,
 #back-tooltip::after,
 #reload-tooltip::after,

app/renderer/js/components/webview.js

@@ -94,6 +94,7 @@ class WebView extends BaseComponent {
 				this.$el.classList.add('onload');
 			}
 			this.loading = false;
+			this.props.switchLoading(false, this.props.url);
 			this.show();
 
 			// Refocus text boxes after reload
@@ -112,6 +113,10 @@ class WebView extends BaseComponent {
 		});
 
 		this.$el.addEventListener('did-start-loading', () => {
+			const isSettingPage = this.props.url.includes('renderer/preference.html');
+			if (!isSettingPage) {
+				this.props.switchLoading(true, this.props.url);
+			}
 			let userAgent = SystemUtil.getUserAgent();
 			if (!userAgent) {
 				SystemUtil.setUserAgent(this.$el.getUserAgent());
@@ -119,6 +124,10 @@ class WebView extends BaseComponent {
 			}
 			this.$el.setUserAgent(userAgent);
 		});
+
+		this.$el.addEventListener('did-stop-loading', () => {
+			this.props.switchLoading(false, this.props.url);
+		});
 	}
 
 	getBadgeCount(title) {

app/renderer/js/main.js

@@ -31,6 +31,7 @@ class ServerManagerView {
 
 		const $actionsContainer = document.getElementById('actions-container');
 		this.$reloadButton = $actionsContainer.querySelector('#reload-action');
+		this.$loadingIndicator = $actionsContainer.querySelector('#loading-action');
 		this.$settingsButton = $actionsContainer.querySelector('#settings-action');
 		this.$webviewsContainer = document.getElementById('webviews-container');
 		this.$backButton = $actionsContainer.querySelector('#back-action');
@@ -38,6 +39,7 @@ class ServerManagerView {
 
 		this.$addServerTooltip = document.getElementById('add-server-tooltip');
 		this.$reloadTooltip = $actionsContainer.querySelector('#reload-tooltip');
+		this.$loadingTooltip = $actionsContainer.querySelector('#loading-tooltip');
 		this.$settingsTooltip = $actionsContainer.querySelector('#setting-tooltip');
 		this.$serverIconTooltip = document.getElementsByClassName('server-tooltip');
 		this.$backTooltip = $actionsContainer.querySelector('#back-tooltip');
@@ -49,6 +51,7 @@ class ServerManagerView {
 		this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
 		this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
 
+		this.loading = {};
 		this.activeTabIndex = -1;
 		this.tabs = [];
 		this.functionalTabs = {};
@@ -193,12 +196,21 @@ class ServerManagerView {
 				isActive: () => {
 					return index === this.activeTabIndex;
 				},
+				switchLoading: (loading, url) => {
+					if (!loading && this.loading[url]) {
+						this.loading[url] = false;
+					} else if (loading && !this.loading[url]) {
+						this.loading[url] = true;
+					}
+					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
+				},
 				onNetworkError: this.openNetworkTroubleshooting.bind(this),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: false,
 				preload: true
 			})
 		}));
+		this.loading[server.url] = true;
 	}
 
 	initActions() {
@@ -239,6 +251,7 @@ class ServerManagerView {
 		});
 
 		this.sidebarHoverEvent(this.$addServerButton, this.$addServerTooltip, true);
+		this.sidebarHoverEvent(this.$loadingIndicator, this.$loadingTooltip);
 		this.sidebarHoverEvent(this.$settingsButton, this.$settingsTooltip);
 		this.sidebarHoverEvent(this.$reloadButton, this.$reloadTooltip);
 		this.sidebarHoverEvent(this.$backButton, this.$backTooltip);
@@ -345,6 +358,14 @@ class ServerManagerView {
 				isActive: () => {
 					return this.functionalTabs[tabProps.name] === this.activeTabIndex;
 				},
+				switchLoading: (loading, url) => {
+					if (!loading && this.loading[url]) {
+						this.loading[url] = false;
+					} else if (loading && !this.loading[url]) {
+						this.loading[url] = true;
+					}
+					this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
+				},
 				onNetworkError: this.openNetworkTroubleshooting.bind(this),
 				onTitleChange: this.updateBadge.bind(this),
 				nodeIntegration: true,
@@ -436,6 +457,8 @@ class ServerManagerView {
 		this.activeTabIndex = index;
 		this.tabs[index].activate();
 
+		this.showLoading(this.loading[this.tabs[this.activeTabIndex].webview.props.url]);
+
 		ipcRenderer.send('update-menu', {
 			// JSON stringify this.tabs to avoid a crash
 			// util.inspect is being used to handle circular references
@@ -446,6 +469,16 @@ class ServerManagerView {
 		});
 	}
 
+	showLoading(loading) {
+		if (!loading) {
+			this.$reloadButton.removeAttribute('style');
+			this.$loadingIndicator.style.display = 'none';
+		} else if (loading) {
+			this.$reloadButton.style.display = 'none';
+			this.$loadingIndicator.removeAttribute('style');
+		}
+	}
+
 	destroyTab(name, index) {
 		if (this.tabs[index].webview.loading) {
 			return;

app/renderer/main.html

@@ -32,6 +32,10 @@
                         <i class="material-icons md-48">refresh</i>
                         <span id="reload-tooltip" style="display:none">Reload</span>
                     </div>
+                    <div class="action-button" id="loading-action">
+                        <i class="refresh material-icons md-48">loop</i>
+                        <span id="loading-tooltip" style="display:none">Loading</span>
+                    </div>
                     <div class="action-button disable" id="back-action">
                         <i class="material-icons md-48">arrow_back</i>
                         <span id="back-tooltip" style="display:none">Go Back</span>
@@ -53,4 +57,4 @@
     </body>
     <script src="js/main.js"></script>
     <script>require('./js/shared/preventdrag.js')</script>
-</html>
+</html>