diff --git a/html_resources/main.css b/html_resources/main.css
index 1525475..4949fef 100644
--- a/html_resources/main.css
+++ b/html_resources/main.css
@@ -101,4 +101,18 @@ pre > div{
.atvalue{ color: lightblue }
.property{ color: orange }
.value{ color: skyblue }
-.curly{ color: orangered }
\ No newline at end of file
+.curly{ color: orangered }
+
+@keyframes showDelayed{ from{ visibility: hidden } to{ visibility: visibile }}
+
+@keyframes loadingBar{ from{ background-size: 0% } to{ background-size: 100% } }
+#placeholder{
+ margin: 2em;
+ border: 2px solid darkslateblue;
+ border-radius: 3px;
+ background-image: linear-gradient(90deg,slateblue,purple);
+ background-repeat: no-repeat;
+ background-position: left;
+ animation: loadingBar 1500ms linear
+}
+.placeholder-text{ animation: showDelayed 2s steps(1) }
\ No newline at end of file
diff --git a/html_resources/selector.js b/html_resources/selector.js
index 2f6aadb..c0aa673 100644
--- a/html_resources/selector.js
+++ b/html_resources/selector.js
@@ -472,6 +472,13 @@ function showUI(){
document.getElementById("ui").classList.remove("hidden");
}
+function waitForDelay(t){
+ t = Number(t) || 10;
+ return new Promise(res =>{
+ setTimeout(res,t)
+ })
+}
+
document.onreadystatechange = (function () {
if (document.readyState === "complete") {
@@ -494,6 +501,7 @@ document.onreadystatechange = (function () {
.then(initDB)
.then(createCategories)
.then(handleSearchQuery)
+ .then(()=>waitForDelay(300))
.then(showUI)
.catch(e => console.log(e))
}
diff --git a/index.html b/index.html
index 76a9fa0..8c935a1 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,9 @@
-FAILURE, Database could not be loaded
+
+
FAILURE, resources could not be loaded properly
+