Use multiple webview to increase loading speed and allow servers to be online at the same time.

app/renderer/css/servermanager.css

@@ -99,12 +99,17 @@ html, body {
     opacity: 1;
 }
 
-#webview {
+webview {
     opacity: 1;
     transition: opacity 0.3s;
+    flex-grow: 1;
+}
+
+webview.loading {
+    opacity: 0;
+    transition: opacity 0.3s;
 }
 
-#webview.loading {
+webview.disabled {
-    opacity: 0;
+    display: none;
-    transition: opacity 0.3s;
 }

app/renderer/js/main.js

@@ -13,6 +13,7 @@ class ServerManagerView {
 
         this.isLoading = false;
         this.settingsTabIndex = -1;
+        this.activeTabIndex = -1;
 	}
 
 	init() {
@@ -33,9 +34,9 @@ class ServerManagerView {
 	initTab(tab) {
 		const {
 			alias,
-			url
+			url,
+            icon
 		} = tab;
-		const icon = tab.icon || 'https://chat.zulip.org/static/images/logo/zulip-icon-128x128.271d0f6a0ca2.png';
         const tabTemplate = tab.template || `
                 <div class="tab" domain="${url}">
                     <div class="server-tab" style="background-image: url(${icon});"></div>
@@ -46,32 +47,42 @@ class ServerManagerView {
 		$tab.addEventListener('click', this.activateTab.bind(this, index));
 	}
 
-    initWebView(url) {
+    initWebView(url, index, nodeIntegration = false) {
         const webViewTemplate = `
             <webview 
-                id="webview"
+                id="webview-${index}"
                 class="loading"
-                src="${url}" 
+                src="${url}"
-                disablewebsecurity 
+                ${nodeIntegration? 'nodeIntegration': ''}
+                disablewebsecurity
                 preload="js/preload.js"
                 webpreferences="allowRunningInsecureContent, javascript=yes">
             </webview>
         `;
-        this.$webView = this.__insert_node(webViewTemplate);
+        const $webView = this.__insert_node(webViewTemplate);
-		this.$content.appendChild(this.$webView);
+		this.$content.appendChild($webView);
-        this.$webView.addEventListener('dom-ready', this.endLoading.bind(this));
-    }
-
-    startLoading(url) {
-        this.$webView.loadURL(url);
         this.isLoading = true;
-        this.$webView.classList.add('loading');
+        $webView.addEventListener('dom-ready', this.endLoading.bind(this, index));
     }
 
-    endLoading() {
+    startLoading(url, index) {
+        const $activeWebView = document.getElementById(`webview-${this.activeTabIndex}`);
+        if ($activeWebView) {
+            $activeWebView.classList.add('disabled');
+        }
+        const $webView = document.getElementById(`webview-${index}`);
+        if (!$webView) {
+            this.initWebView(url, index, this.settingsTabIndex == index);
+        } else {
+            $webView.classList.remove('disabled');
+        }
+    }
+
+    endLoading(index) {
+        const $webView = document.getElementById(`webview-${index}`);
         this.isLoading = false;
-        this.$webView.classList.remove('loading');
+        $webView.classList.remove('loading');
-        this.$webView.openDevTools();        
+        // $webView.openDevTools();
     }
 
 	initActions() {
@@ -107,26 +118,21 @@ class ServerManagerView {
 
     activateTab(index) {
         if (this.isLoading) return;
-        
-        const $tab = this.$tabsContainer.childNodes[index];
 
-        if (this.$activeTab) {
+        if (this.activeTabIndex != -1) {
-            if (this.$activeTab == $tab) {
+            if (this.activeTabIndex == index) {
                 return;
             } else {
-                this.$activeTab.classList.remove('active');
+                this.__get_tab_at(this.activeTabIndex).classList.remove('active');
             }
         }
 
+        const $tab = this.__get_tab_at(index);
 		$tab.classList.add('active');
-        this.$activeTab = $tab;
 
         const domain = $tab.getAttribute('domain');
-        if (this.$webView){
+        this.startLoading(domain, index);
-            this.startLoading(domain);
+        this.activeTabIndex = index;
-        } else {
-            this.initWebView(domain);
-        }
     }
 
     __insert_node(html) {
@@ -134,6 +140,10 @@ class ServerManagerView {
         wrapper.innerHTML= html;
         return wrapper.firstElementChild;
     }
+
+    __get_tab_at(index) {
+        return this.$tabsContainer.childNodes[index];
+    }
 }
 
 window.onload = () => {