Custom loading spinner for PWA
This commit is contained in:
parent
146a537ec4
commit
bf87cf1a2e
|
@ -102,6 +102,15 @@ img {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* PWA: loading indicator in the corner of the page */
|
||||||
|
#nonshy-pwa-loader {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999999;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1024px) {
|
@media screen and (min-width: 1024px) {
|
||||||
.nonshy-mobile-notification {
|
.nonshy-mobile-notification {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -11,6 +11,20 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// If we are a PWA in standalone mode, clicking on-site links shows our custom loading spinner.
|
||||||
|
if (window.matchMedia('(display-mode: standalone)').matches) {
|
||||||
|
const spinner = document.querySelector("#nonshy-pwa-loader");
|
||||||
|
(document.querySelectorAll("a, form") || []).forEach(node => {
|
||||||
|
// Links: only on-site ones.
|
||||||
|
if (node.tagName === 'A' && node.target === '_blank') return;
|
||||||
|
|
||||||
|
// Show our spinner on click or submit.
|
||||||
|
node.addEventListener(node.tagName === 'A' ? 'click' : 'submit', () => {
|
||||||
|
spinner.style.display = "block";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Hamburger menu script.
|
// Hamburger menu script.
|
||||||
(function () {
|
(function () {
|
||||||
// Get all "navbar-burger" elements
|
// Get all "navbar-burger" elements
|
||||||
|
|
|
@ -389,6 +389,14 @@
|
||||||
|
|
||||||
<!-- Right-click modal -->
|
<!-- Right-click modal -->
|
||||||
{{template "right-click-modal" .}}
|
{{template "right-click-modal" .}}
|
||||||
|
|
||||||
|
<!-- PWA loading indicator -->
|
||||||
|
<div id="nonshy-pwa-loader">
|
||||||
|
<strong class="tag is-success">
|
||||||
|
<i class="fa fa-spinner fa-spin mr-2"></i>
|
||||||
|
Loading...
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user