fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2024-11-09 19:30:15 +00:00
Code Issues 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

16
html_resources/main.css
View file

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

8
html_resources/selector.js
View file

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

4
index.html
View file

@ -9,7 +9,9 @@
<link rel="icon" href="html_resources/favicon.svg" type="image/svg+xml">
</head>
<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="categories" class="categoryList">
</div>