.

generic/templates/generic/user_form_fixed.html

@@ -0,0 +1,21 @@
+{% load crispy_forms_tags %}
+
+{{ form.media }}
+<form hx-post="{% url 'generic:exam_collection_add_author' collection_id %}" hx-target="#add-user" hx-swap="innerHTML" hx-indicator="#add-author-indicator" action="" method="post" enctype="multipart/form-data" id="user-form" class="inline-form">
+    {% csrf_token %}
+
+    {{ form|crispy }}
+    {% comment %} Use a normal submit so the form data is included in the HTMX request {% endcomment %}
+    <button type="submit" class="btn btn-primary">Submit</button>
+
+    <span id="add-author-indicator" class="ms-2" aria-hidden="true">
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+    </span>
+
+</form>
+
+<style>
+    /* Hide indicator by default; HTMX will add the `htmx-request` class during requests */
+    #add-author-indicator { display: none; }
+    #add-author-indicator.htmx-request { display: inline-flex; align-items: center; }
+</style>