Add loading indicator to form modals #1022
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1022 +/- ##
=======================================
Coverage 81.19% 81.19%
=======================================
Files 140 140
Lines 5074 5074
=======================================
Hits 4120 4120
Misses 954 954 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
What this PR essentially does is adds loading indicator to submit action in any modal, not just bulk. This should either be made clear, or logic should be moved to src/argus/htmx/templates/htmx/incidents/_base_incident_update_modal.html instead.
I am personally not too thrilled about placement of the loading indicator over the text of the submit button. I would suggest putting the indicator on the whole modal, if inside _baso_form_modal:
<dialog id="{{ dialog_id }}" class="modal">
<div class="modal-box card card-compact shadow-xl loading-box">
...
(the contents of .modal-box will need to be wrapped in a div for that to work).
Or we could put the indicator below the input fields in each relevant modal.
Submit button should also be disabled while request is loading, but this is a polish for another PR, unless we land on the option with keeping the indicator on the submit button. Button becomes grayed-out in that case and should definitely become disabled because of that.
elfjes
force-pushed
the
bulk-action-indicator
branch
from
fb93378 to
c260552
Compare
|
| <button class="btn">{{ cancel_text }}</button> | ||
| </div> | ||
| <div class="modal-box card card-compact shadow-xl loading-box"> | ||
| <div class="w-full"> |
There was a problem hiding this comment.
w-full seems redundant
There was a problem hiding this comment.
I thought so too, but it wouldn't render correctly for me :(
Maybe it's something in our modal that we do differently, I can have a look
There was a problem hiding this comment.
We can just keep it 😌
There was a problem hiding this comment.
ugh css is weird. Can't really figure it out, but something in our html requires that w-full but I don't know what. https://github.com/GEANT/geant-argus/blob/develop/src/geant_argus/geant_argus/templates/htmx/incidents/_incident_clear_modal.html
If it's not in your way, let's keep it in there :)
There was a problem hiding this comment.
CSS is weird indeed 😄
elfjes
changed the title
Adds a loading indicator to the _base_form_modal that can be toggled using hx-indicator and adds this hx-indicator to the bulk modals
Other modals may also implement thix by setting
hx-indicatorfrom Uninett/argus-htmx-frontend#237