pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

show some loadig status when page is initializing

Browse source
This commit is contained in:
MrOtherGuy 2021-05-15 09:15:25 +03:00
parent 63f6da832b
commit 0095829d1d
3 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
html_resources/main.css
View file

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

8
html_resources/selector.js
View file

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

4
index.html
View file

@ -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>