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.

2 files changed, 21 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 = ''")
diff --git a/src/app/main.css b/src/app/main.css
index 903c03e..3229f6c 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -92,10 +92,17 @@ button {
 .popup webview {
 	width: 78%;
 	margin: 0 auto;
+	filter: opacity(1.0);
+	transition: filter 0.15s ease-in-out;
 	margin-top: calc(var(--spacing) / 2);
 	height: calc(100% - calc(var(--spacing) / 2));
 }
 
+.popup webview.loading {
+	filter: opacity(0.0);
+	pointer-events: none;
+}
+
 .popup .el, .popup .misc, .popup .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3.5);