webview: Fix webview glitches.

2025-10-23 16:13:37 +00:00 · 2018-02-23 23:33:05 +05:30
3 changed files with 34 additions and 28 deletions
--- a/app/renderer/css/main.css
+++ b/app/renderer/css/main.css
@@ -13,6 +13,9 @@ body {
 #content {
    display: flex;
    height: 100%;
+}
+
+.loading {
    background: #fff url(../img/ic_loading.gif) no-repeat;
    background-size: 60px 60px;
    background-position: center;
@@ -384,4 +387,4 @@ webview:focus {
        overflow: hidden;
        opacity: 1;
    }
-}
+}
--- a/app/renderer/js/components/webview.js
+++ b/app/renderer/js/components/webview.js
@@ -21,6 +21,7 @@ class WebView extends BaseComponent {
 		this.zoomFactor = 1.0;
 		this.loading = false;
 		this.badgeCount = 0;
+		this.loadingIndicator = document.getElementById('content');
 	}

 	template() {
@@ -92,6 +93,8 @@ class WebView extends BaseComponent {
 		});

 		this.$el.addEventListener('dom-ready', () => {
+			// const loadingIndicator = document.getElementById('content');
+			this.loadingIndicator.classList.remove('loading');
 			if (this.props.role === 'server') {
 				this.$el.classList.add('onload');
 			}
--- a/app/renderer/main.html
+++ b/app/renderer/main.html
@@ -9,39 +9,39 @@
 </head>

 <body>
-  <div id="content">
+  <div id="content" class="loading">
    <div class="popup">
      <span class="popuptext hidden" id="fullscreen-popup"></span>
-  </div>
-  <div id="sidebar" class="toggle-sidebar">
-    <div id="view-controls-container">
-      <div id="tabs-container"></div>
-      <div id="add-tab" class="tab functional-tab">
-        <div class="server-tab" id="add-action">
-          <i class="material-icons">add</i>
+    </div>
+    <div id="sidebar" class="toggle-sidebar">
+      <div id="view-controls-container">
+        <div id="tabs-container"></div>
+        <div id="add-tab" class="tab functional-tab">
+          <div class="server-tab" id="add-action">
+            <i class="material-icons">add</i>
+          </div>
+          <span id="add-server-tooltip" style="display:none">Add organization</span>
+        </div>
+      </div>
+      <div id="actions-container">
+        <div class="action-button" id="reload-action">
+          <i class="material-icons md-48">refresh</i>
+          <span id="reload-tooltip" style="display:none">Reload</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>
+        </div>
+        <div class="action-button" id="settings-action">
+          <i class="material-icons md-48">settings</i>
+          <span id="setting-tooltip" style="display:none">Settings</span>
        </div>
-        <span id="add-server-tooltip" style="display:none">Add organization</span>
      </div>
    </div>
-    <div id="actions-container">
-      <div class="action-button" id="reload-action">
-        <i class="material-icons md-48">refresh</i>
-        <span id="reload-tooltip" style="display:none">Reload</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>
-      </div>
-      <div class="action-button" id="settings-action">
-        <i class="material-icons md-48">settings</i>
-        <span id="setting-tooltip" style="display:none">Settings</span>
-      </div>
+    <div id="main-container">
+      <div id="webviews-container"></div>
    </div>
  </div>
-  <div id="main-container">
-    <div id="webviews-container"></div>
-  </div>
-  </div>
 </body>
 <script src="js/main.js"></script>
-</html>
+</html>