show some loadig status when page is initializing
This commit is contained in:
parent
63f6da832b
commit
0095829d1d
3 changed files with 26 additions and 2 deletions
|
@ -102,3 +102,17 @@ pre > div{
|
||||||
.property{ color: orange }
|
.property{ color: orange }
|
||||||
.value{ color: skyblue }
|
.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) }
|
|
@ -472,6 +472,13 @@ function showUI(){
|
||||||
document.getElementById("ui").classList.remove("hidden");
|
document.getElementById("ui").classList.remove("hidden");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function waitForDelay(t){
|
||||||
|
t = Number(t) || 10;
|
||||||
|
return new Promise(res =>{
|
||||||
|
setTimeout(res,t)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
document.onreadystatechange = (function () {
|
document.onreadystatechange = (function () {
|
||||||
|
|
||||||
if (document.readyState === "complete") {
|
if (document.readyState === "complete") {
|
||||||
|
@ -494,6 +501,7 @@ document.onreadystatechange = (function () {
|
||||||
.then(initDB)
|
.then(initDB)
|
||||||
.then(createCategories)
|
.then(createCategories)
|
||||||
.then(handleSearchQuery)
|
.then(handleSearchQuery)
|
||||||
|
.then(()=>waitForDelay(300))
|
||||||
.then(showUI)
|
.then(showUI)
|
||||||
.catch(e => console.log(e))
|
.catch(e => console.log(e))
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,9 @@
|
||||||
<link rel="icon" href="html_resources/favicon.svg" type="image/svg+xml">
|
<link rel="icon" href="html_resources/favicon.svg" type="image/svg+xml">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="placeholder">FAILURE, Database could not be loaded</div>
|
<div id="placeholder">
|
||||||
|
<div class="placeholder-text">FAILURE, resources could not be loaded properly</div>
|
||||||
|
</div>
|
||||||
<div id="ui" class="hidden">
|
<div id="ui" class="hidden">
|
||||||
<div id="categories" class="categoryList">
|
<div id="categories" class="categoryList">
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue