From f149f21f618e1fc42e8a6f604907a6f53f756569 Mon Sep 17 00:00:00 2001
From: Fu Zi Xiang <speed2exe@live.com.sg>
Date: Thu, 9 Nov 2023 16:02:50 +0800
Subject: [PATCH] feat: add loading indicator when button pressed

---
 admin_frontend/assets/base.css             |  4 ++++
 admin_frontend/templates/layouts/base.html | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/admin_frontend/assets/base.css b/admin_frontend/assets/base.css
index 5d849085..83a109ff 100644
--- a/admin_frontend/assets/base.css
+++ b/admin_frontend/assets/base.css
@@ -78,3 +78,7 @@ body {
 .input:focus {
   border-color: var(--af-cyan);
 }
+
+.loading-button {
+  filter: brightness(0.7);
+}
diff --git a/admin_frontend/templates/layouts/base.html b/admin_frontend/templates/layouts/base.html
index 6bea1e40..51d566fc 100644
--- a/admin_frontend/templates/layouts/base.html
+++ b/admin_frontend/templates/layouts/base.html
@@ -24,7 +24,17 @@
 </html>
 
 <script>
+  document.body.addEventListener('htmx:beforeRequest', function(event) {
+    const closeButton = event.target.querySelector('.button');
+    closeButton.classList.add('loading-button');
+    closeButton.disabled = true;
+  });
+
   document.body.addEventListener("htmx:afterRequest", function (evt) {
+    const closeButton = event.target.querySelector('.button');
+    closeButton.classList.remove('loading-button');
+    closeButton.disabled = false;
+
     const detail = evt.detail;
     if (detail.failed) {
       const xhr = detail.xhr;