chk
/
AppFlowy-Cloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin_frontend/assets/base.css
View File

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

10
admin_frontend/templates/layouts/base.html
View File

@ -24,7 +24,17 @@
</html> </html>
<script> <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) { 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; const detail = evt.detail;
if (detail.failed) { if (detail.failed) {
const xhr = detail.xhr; const xhr = detail.xhr;