Custom loading spinner for PWA

This commit is contained in:
Noah Petherbridge 2024-08-22 22:19:42 -07:00
parent 146a537ec4
commit bf87cf1a2e
3 changed files with 31 additions and 0 deletions

View File

@ -102,6 +102,15 @@ img {
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) {
.nonshy-mobile-notification {
display: none;

View File

@ -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.
(function () {
// Get all "navbar-burger" elements

View File

@ -389,6 +389,14 @@
<!-- 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>
</html>
{{end}}