added loading, close button, element fadein etc

To show the loading simply do Browser.loading(), when a BrowserEl() is
made it auto removes it. The loading and BrowserEl's will fade into
view instead of popping in instantly.

And then now there's a tiny close button, as it may not be obvious you
can click the dark overlay or click Escape.

1 files changed, 10 insertions, 5 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
index 50cabfe..8af6afe 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -28,6 +28,11 @@ var Browser = {
 				description: pkg.description
 			})
 		}
+	},
+	loading: () => {
+		if (! browserEntries.querySelector(".loading")) {
+			browserEntries.innerHTML = `<div class="loading">${lang("gui.browser.loading")}</div>`;
+		}
 	}
 }; Browser.toggle()
 Browser.loadfront()
@@ -45,7 +50,11 @@ function BrowserEl(properties) {
 		...properties
 	}
 
-	browser.innerHTML += `
+	if (browserEntries.querySelector(".loading")) {
+		browserEntries.innerHTML = "";
+	}
+
+	browserEntries.innerHTML += `
 		<div class="el">
 			<div class="image">
 				<img src="${properties.image}">
@@ -59,7 +68,3 @@ function BrowserEl(properties) {
 		</div>
 	`
 }
-
-new BrowserEl()
-new BrowserEl()
-new BrowserEl()