diff --git a/web/static/css/theme.css b/web/static/css/theme.css index 85b04b9..de90436 100644 --- a/web/static/css/theme.css +++ b/web/static/css/theme.css @@ -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; diff --git a/web/static/js/bulma.js b/web/static/js/bulma.js index bd2d65a..9cc056f 100644 --- a/web/static/js/bulma.js +++ b/web/static/js/bulma.js @@ -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 diff --git a/web/templates/base.html b/web/templates/base.html index 52d1167..6ca3c5f 100644 --- a/web/templates/base.html +++ b/web/templates/base.html @@ -389,6 +389,14 @@ {{template "right-click-modal" .}} + + +
+ + + Loading... + +
{{end}}