feat: add loading indicator when button pressed

This commit is contained in:
Fu Zi Xiang 2023-11-09 16:02:50 +08:00
parent 3097169143
commit f149f21f61
No known key found for this signature in database
2 changed files with 14 additions and 0 deletions

View File

@ -78,3 +78,7 @@ body {
.input:focus {
border-color: var(--af-cyan);
}
.loading-button {
filter: brightness(0.7);
}

View File

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