feat: implement hx-boost for reliable loading indication

templates/booking/create/authenticate.html.twig

@@ -39,7 +39,7 @@
                 {% endif %}
 
                 <div class="pb-4">
-                    <form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'show') }}>
+                    <form action="{{ path('app_login') }}" method="post">
                         <div class="mb-4">
                             <label for="username" class="mb-1 font-semibold text-white">
                                 E-Mail:

templates/booking/create/step_1.html.twig

@@ -25,10 +25,7 @@
 {% block content %}
     {{ form_start(form, {
         'attr': {
-            'class': 'flex-1 flex flex-col min-h-0',
-            'hx-post': path('app_booking_create_step_1'),
-            'hx-target': '#form-wrapper',
-            'hx-swap': 'innerHTML'
+            'class': 'flex-1 flex flex-col min-h-0'
         }
     }) }}
         {# Pagination - mobile only (above summary) #}
@@ -95,7 +92,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}}>
                     Weiter zu Schritt 2
                 </button>
             </div>

templates/booking/create/step_2.html.twig

@@ -4,10 +4,7 @@
     {% include '_partials/_flashes.html.twig' %}
     {{ form_start(form, {
         'attr': {
-            'class': 'flex-1 flex flex-col min-h-0',
-            'hx-post': path('app_booking_create_step_2'),
-            'hx-target': '#main-content',
-            'hx-swap': 'innerHTML scroll:top'
+            'class': 'flex-1 flex flex-col min-h-0'
         }
     }) }}
         {# Pagination - mobile only (above summary) #}
@@ -70,7 +67,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Weiter zu Schritt 3
                 </button>
             </div>

templates/booking/create/step_2_participant.html.twig

@@ -4,10 +4,7 @@
     {{ form_start(form, {
         'attr': {
             'class': 'flex-1 flex flex-col min-h-0',
-            'novalidate': 'novalidate',
-            'hx-post': path(submitRouteName, submitRouteParams|default({index: participantIndex})),
-            'hx-target': '#main-content',
-            'hx-swap': 'innerHTML scroll:top'
+            'novalidate': 'novalidate'
         }
     }) }}
         {# Pagination - mobile only (above form) #}
@@ -40,11 +37,10 @@
         <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
             <div class="flex justify-between">
                 <a href="{{ path('app_booking_create_step_2') }}"
-                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
-                   {{ stimulus_action('loading', 'show') }}>
+                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </a>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Speichern
                 </button>
             </div>

templates/booking/create/step_3.html.twig

@@ -4,11 +4,7 @@
     {{ form_start(form, {
         'attr': {
             'class': 'flex-1 flex flex-col min-h-0',
-            'novalidate': 'novalidate',
-            'hx-post': path('app_booking_create_step_3'),
-            'hx-target': '#form-wrapper',
-            'hx-select': '#form-wrapper',
-            'hx-swap': 'outerHTML'
+            'novalidate': 'novalidate'
         }
     }) }}
         {# Pagination - mobile only (above summary) #}
@@ -82,7 +78,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     Weiter zu Schritt 4
                 </button>
             </div>

templates/booking/create/step_4.html.twig

@@ -6,11 +6,7 @@
     {{ form_start(form, {
         'attr': {
             'class': 'flex-1 flex flex-col min-h-0',
-            'novalidate': 'novalidate',
-            'hx-post': path('app_booking_create_step_4'),
-            'hx-target': '#form-wrapper',
-            'hx-select': '#form-wrapper',
-            'hx-swap': 'outerHTML'
+            'novalidate': 'novalidate'
         }
     }) }}
         {# Pagination - mobile only #}
@@ -560,7 +556,7 @@
                         class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
                     <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                 </button>
-                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'show') }}>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                     {% if bookingCreateDto.bookingStatus == 'A' %}
                         Anfragen
                     {% else %}

templates/booking/create/success.html.twig

@@ -28,13 +28,13 @@
                 {# Authenticated user - show account-related actions #}
                 <ul class="divide-y divide-primary-bg/40">
                     <li class="py-4">
-                        <a href="{{ path('app_bookings') }}" class="flex items-center space-x-2 group" {{ stimulus_action('loading', 'show') }}>
+                        <a href="{{ path('app_bookings') }}" class="flex items-center space-x-2 group">
                             <svg class="w-8 h-8 text-white group-hover:text-primary-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="128" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 64 56 80 88 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 128 56 144 88 112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="40 192 56 208 88 176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                             <span class="text-xl uppercase text-white group-hover:text-primary-light">Meine Buchungen</span>
                         </a>
                     </li>
                     <li class="py-4">
-                        <a href="{{ path('app_personal_data') }}" class="flex items-center space-x-2 group" {{ stimulus_action('loading', 'show') }}>
+                        <a href="{{ path('app_personal_data') }}" class="flex items-center space-x-2 group">
                             <svg class="w-8 h-8 text-white group-hover:text-primary-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M160,224c3.67-13.8,16.6-24,32-24s28.33,10.2,32,24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="192" cy="176" r="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M120,208H40a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H93.33a8,8,0,0,1,4.8,1.6l27.74,20.8a8,8,0,0,0,4.8,1.6H216a8,8,0,0,1,8,8v32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                             <span class="text-xl uppercase text-white group-hover:text-primary-light">Meine Daten</span>
                         </a>