Add django-tables2 and utils, example, docs for usage with HTMX

corehq/apps/hqwebapp/static/hqwebapp/js/htmx_utils/hq_hx_loading.js

@@ -0,0 +1,25 @@
+/*
+    Adds an `is-loading` class to the element with ID specified in the `hq-hx-loading` attribute.
+    This `is-loading` class is applied when to that ID before an HTMX request begins, and is
+    removed after an HTMX swap is completed.
+
+    This is useful for adding loading indicators to elements outside the parent heirarchy available
+    through using `hx-indicator` alone. Right now, this is used to add an `is-loading` style to a django tables
+    table, which overlays a loading indicator across the entire table (seen in hqwebapp/tables/bootstrap5_htmx.html)
+ */
+document.body.addEventListener('htmx:beforeRequest', (evt) => {
+    if (evt.detail.elt.hasAttribute('hq-hx-loading')) {
+        let loadingElt = document.getElementById(evt.detail.elt.getAttribute('hq-hx-loading'));
+        if (loadingElt) {
+            loadingElt.classList.add('is-loading');
+        }
+    }
+});
+document.body.addEventListener('htmx:afterSwap', (evt) => {
+    if (evt.detail.elt.hasAttribute('hq-hx-loading')) {
+        let loadingElt = document.getElementById(evt.detail.elt.getAttribute('hq-hx-loading'));
+        if (loadingElt && loadingElt.classList.contains('is-loading')) {
+            loadingElt.classList.remove('is-loading');
+        }
+    }
+});

corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_tables.scss

@@ -128,3 +128,43 @@
     background-color: $blue-700;
   }
 }
+
+.table-container {
+  position: relative;
+
+  .table-loading-indicator {
+    z-index: 1000;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(255, 255, 255, 0.25);
+    display: none;
+
+    &.is-loading {
+      display: block;
+    }
+
+    .spinner-border {
+      position: absolute;
+      border-width: $table-loading-spinner-border-width;
+      color: rgba(0, 0, 0, 0.25);
+      width: $table-loading-spinner-size;
+      height: $table-loading-spinner-size;
+      $_offset: $table-loading-spinner-size / 2;
+      left: calc(50% - $_offset);
+      top: calc(50% - $_offset);
+    }
+
+    .table-loading-progress {
+      z-index: 1000;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background-color: $white;
+      font-weight: bold;
+    }
+  }
+}

corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss

@@ -230,3 +230,7 @@ $form-validation-states: (
 // Make pagination-lg the same height as other lg inputs
 $pagination-padding-x-lg: 1.0rem;
 $pagination-padding-y-lg: 0.5rem;
+
+// Table loading indicator
+$table-loading-spinner-size: 150px;
+$table-loading-spinner-border-width: 20px;