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 = [];