applying suggestions from htmx-indicator pr

UCL · Jan 10, 2025 · 74cd198 · 74cd198
1 parent a9fd110
commit 74cd198
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/src/rard/static/css/project.css b/src/rard/static/css/project.css
@@ -589,3 +589,9 @@ section.footnotes {
     background-position: 50% 0, 100% 0, 100% 100%, 0 100%;
   }
 }
+
+.htmx-request .loader,
+.htmx-request.loader {
+  opacity: 1;
+  visibility: visible;
+}
diff --git a/src/rard/templates/research/antiquarian_detail.html b/src/rard/templates/research/antiquarian_detail.html
@@ -138,9 +138,26 @@ <h5>{% trans 'Ordered Material' %}</h5>
             <div>
               <h5>{% trans 'Bibliography' %}</h5>
             </div>
-            <div id="bib-buttons-area">
+
+            <div class="loader-wrapper">
+                <div id="loader" class="loader htmx-indicator"></div>
+            </div>
+
+            <div id="bib-buttons-area" class="d-flex justify-space-between">
+
               {% if has_object_lock and perms.research.change_bibliographyitem %}
-                <button type="button" class='btn text-primary p-0 ml-2' hx-get="{% url "antiquarian:refresh_bibliography" pk=antiquarian.pk %}" hx-trigger="click">{% trans 'Refresh bibliography from mentions' %}</button>
+
+              <button
+                  type="button"
+                  id="bib-refresh"
+                  class='btn text-primary p-0 ml-2'
+                  hx-get="{% url "antiquarian:refresh_bibliography" pk=antiquarian.pk %}"
+                  hx-trigger="click"
+                  hx-indicator="#loader"
+              >
+                  {% trans 'Refresh bibliography from mentions' %}
+              </button>
+
               {% endif %}
             </div>
           </div>

diff --git a/src/rard/templates/research/citingauthor_detail.html b/src/rard/templates/research/citingauthor_detail.html
@@ -138,12 +138,25 @@ <h5>{% trans 'Linked Material' %}</h5>
             <div>
                 <h5>{% trans 'Bibliography' %}</h5>
             </div>
+
             <div class="loader-wrapper">
-            <div class="loader" id="loader"></div>
-        </div>
-            <div class="d-flex flex-column">
+                <div id="loader" class="loader htmx-indicator"></div>
+            </div>
+
+            <div id="bib-buttons-area" class="d-flex justify-space-between">
+
                 {% if perms.research.change_citingauthor and has_object_lock %}
-                 <button type="button" id="bib-refresh" class='btn text-primary text-right d-block' hx-get="{% url "citingauthor:refresh_bibliography" pk=citingauthor.pk %}" hx-trigger="click">{% trans 'Refresh bibliography from mentions' %}</button>
+
+                <button
+                    type="button"
+                    id="bib-refresh"
+                    class='btn text-primary text-right d-block'
+                    hx-get="{% url "citingauthor:refresh_bibliography" pk=citingauthor.pk %}"
+                    hx-trigger="click"
+                    hx-indicator="#loader"
+                >
+                    {% trans 'Refresh bibliography from mentions' %}
+                </button>
 
                 {% endif %}
             </div>
@@ -153,18 +166,4 @@ <h5>{% trans 'Bibliography' %}</h5>
     </section>
 
     {% endwith %}
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        const refreshBtn = document.getElementById("bib-refresh");
-        refreshBtn.addEventListener("click", function() {
-            const loader = document.querySelector('.loader-wrapper > .loader');
-            if (loader) {
-                loader.style.visibility = 'visible';
-                setTimeout(function() {
-                    loader.style.visibility = 'hidden';
-                }, 2000);
-            }
-        });
-    });
-</script>
 {% endblock %}