feat: implement a simple loader

Play with htmx events

static/js/loader.js

@@ -0,0 +1,98 @@
+/**
+ * A loading bar that hooks into htmx events to automatically indicate the
+ * progression of pending requests.
+ *
+ * ```html
+ * <div data-loader></div>
+ * ```
+ * Only the first loader will be used.
+ */
+(function () {
+    var MAX_INCREMENT = 20;
+    var MIN_INCREMENT = 3;
+    var ADVANCE_UNTIL = 90;
+
+    var pending = 0;
+    var increment = MAX_INCREMENT;
+    var timeout = null;
+    var interval = null;
+
+    function getLoader() {
+        return document.querySelector("[data-loader]");
+    }
+
+    function clamp(x, a, b) {
+        return Math.max(a, Math.min(x, b));
+    }
+
+    function progress(loader) {
+        loader.hidden = false;
+        var current = parseInt(loader.dataset.loader);
+
+        if (current < ADVANCE_UNTIL) {
+            current = Math.min(current + increment, ADVANCE_UNTIL);
+            loader.dataset.loader = current;
+            loader.style.right = 100 - current + "%";
+            increment = clamp(Math.floor(increment * 0.65), MIN_INCREMENT, MAX_INCREMENT);
+        }
+    }
+
+    function start() {
+        pending++;
+
+        if (pending > 1) {
+            return;
+        }
+
+        clearTimeout(timeout);
+        clearInterval(interval);
+
+        increment = MAX_INCREMENT;
+
+        var loader = getLoader();
+        if (!loader) {
+            return;
+        }
+
+        // Give the request a reasonable time to complete before triggering the
+        // loader.
+        timeout = setTimeout(function () {
+            loader.dataset.loader = 0;
+            loader.style.right = "100%";
+            loader.hidden = false;
+
+            // Increment the loader state until it reaches the threshold.
+            // Trickery and lies!
+            interval = setInterval(function () {
+                progress(loader)
+            }, 100);
+        }, 250);
+    }
+
+    function finish() {
+        pending--;
+
+        if (pending <= 0) {
+            clearTimeout(timeout);
+            clearInterval(interval);
+
+            var loader = getLoader();
+            if (!loader) {
+                return;
+            }
+
+            loader.style.right = 0;
+            timeout = setTimeout(function () {
+                loader.hidden = true;
+                timeout = setTimeout(function () {
+                    loader.dataset.loader = 0;
+                    loader.style.right = "100%";
+                }, 500);
+            }, 500);
+            return;
+        }
+    }
+
+    addEventListener("htmx:beforeRequest", start);
+    addEventListener("htmx:afterRequest", finish);
+})();