webview: Fix webview flickering. (#439)

Rewrote styling for the webview so that it takes the whole window
when the app loads up.

Fixes #249.

Author: akashnimare

app/renderer/css/main.css

@@ -28,7 +28,7 @@ body {
     -webkit-app-region: drag;
     overflow: hidden;
     transition: all 0.5s ease;
-    z-index: 1;
+    z-index: 2;
 }
 
 .toggle-sidebar div {
@@ -249,28 +249,34 @@ body {
 }
 
 webview {
-    opacity: 1;
     /* transition: opacity 0.3s ease-in; */
     flex-grow: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 webview.onload {
     transition: opacity 1s cubic-bezier(0.95, 0.05, 0.795, 0.035);
 }
 
+webview.active {
+    opacity: 1;
+    z-index: 1;
+    visibility: visible;
+}
+
 webview.disabled {
-    flex: 0 1;
-    height: 0;
-    width: 0;
     opacity: 0;
-    transition: opacity 0.3s ease-out;
 }
 
-webview:focus {
+webview.focus {
     outline: 0px solid transparent;
 }
 
-
 /* Tooltip styling */
 
 #back-tooltip,

app/renderer/js/components/webview.js

@@ -130,6 +130,7 @@ class WebView extends BaseComponent {
 		}
 
 		this.$el.classList.remove('disabled');
+		this.$el.classList.add('active');
 		setTimeout(() => {
 			if (this.props.role === 'server') {
 				this.$el.classList.remove('onload');
@@ -168,6 +169,7 @@ class WebView extends BaseComponent {
 
 	hide() {
 		this.$el.classList.add('disabled');
+		this.$el.classList.remove('active');
 	}
 
 	load() {