preview <webview> now fades in and out seamlessly

Instead of instantly flashing when it's done loading and so on, it now
fades in, instead, without any problems.

1 files changed, 14 insertions, 2 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
index 138aef8..acced69 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -251,10 +251,10 @@ function openExternal(url) {
 var view = document.querySelector(".popup#preview webview");
 var Preview = {
 	show: () => {
-		preview.classList.add("shown")
+		preview.classList.add("shown");
 	},
 	hide: () => {
-		preview.classList.remove("shown")
+		preview.classList.remove("shown");
 	},
 	set: (url, autoshow) => {
 		if (autoshow != false) {Preview.show()}
@@ -450,6 +450,18 @@ view.addEventListener("dom-ready", () => {
 	view.insertCSS(css.join(" "));
 })
 
+view.addEventListener("did-stop-loading", () => {
+	view.style.display = "flex";
+	setTimeout(() => {
+		view.classList.remove("loading");
+	}, 200)
+})
+
+view.addEventListener("did-start-loading", () => {
+	view.style.display = "none";
+	view.classList.add("loading");
+})
+
 let checks = document.querySelectorAll(".check");
 for (let i = 0; i < checks.length; i++) {
 	checks[i].setAttribute("onclick", "this.classList.toggle('checked');Browser.loadfront();search.value = ''")