Custom loading spinner for PWA

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;

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

web/templates/base.html

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