feat: htmx powered requests, improved loading indicator

feat: loading indicator and htmx form submit

templates/booking/create_step_3.html.twig

@@ -27,10 +27,18 @@
     <h1>Neue Buchung</h1>
 
     <div class="grid grid-cols-3 gap-8">
-        <div class="col-span-2">
+        <div id="form-wrapper" class="col-span-2">
             <h2 class="mb-6">Zahlungsart</h2>
 
-            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
+            {{ form_start(form, {
+                'attr': {
+                    'novalidate': 'novalidate',
+                    'hx-post': path('app_booking_create_step_3'),
+                    'hx-target': '#form-wrapper',
+                    'hx-select': '#form-wrapper',
+                    'hx-swap': 'outerHTML'
+                }
+            }) }}
 
             {# Payment method selection with HTMX #}
             <div id="form-payment"
@@ -63,7 +71,7 @@
 
             <div class="flex justify-between pt-6">
                 <a href="{{ path('app_booking_create_step_2') }}" class="button bg-button bg-button--secondary">Zurück</a>
-                <button type="submit" class="button bg-button bg-button--secondary">Weiter</button>
+                <button type="submit" class="button bg-button bg-button--secondary" {{ stimulus_action('loading', 'toggle') }}>Weiter</button>
             </div>
 
             {{ form_end(form) }}