show some loadig status when page is initializing

html_resources/main.css

@@ -101,4 +101,18 @@ pre > div{
 .atvalue{ color: lightblue }
 .property{ color: orange }
 .value{ color: skyblue }
-.curly{ color: orangered } 
+.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) }

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))
   }