From 39bacd2927dd8a3687c6a2ba00ccf2bcf34135b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 20 Feb 2026 17:23:56 +0100
Subject: [PATCH] fix: ensure loading indicator when entering booking flow in
 Chrome

---
 .../_partials/_loading_indicator.html.twig    | 42 +------------------
 templates/_partials/_spinner.html.twig        | 41 ++++++++++++++++++
 templates/booking/create/index.html.twig      |  1 +
 3 files changed, 43 insertions(+), 41 deletions(-)
 create mode 100644 templates/_partials/_spinner.html.twig

diff --git a/templates/_partials/_loading_indicator.html.twig b/templates/_partials/_loading_indicator.html.twig
index 8379087..b5d6655 100644
--- a/templates/_partials/_loading_indicator.html.twig
+++ b/templates/_partials/_loading_indicator.html.twig
@@ -1,44 +1,4 @@
 <div id="loading-indicator"
      class="invisible fixed top-0 left-0 inset-0 z-50 backdrop-blur-sm flex items-center justify-center transition-all duration-100">
-    <svg class="{{ html_classes('w-32 h-32 lg:w-48 lg:h-48', {
-        'text-primary-light': booking_theme() == 'base',
-        'text-sbw-secondary': booking_theme() == 'sbw',
-        'text-snz-secondary': booking_theme() == 'snz',
-        'text-ser-secondary': booking_theme() == 'ser',
-    }) }}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
-        <g fill="none" fill-rule="evenodd" stroke-width="2">
-            <circle cx="22" cy="22" r="1">
-                <animate attributeName="r"
-                         begin="0s" dur="1.8s"
-                         values="1; 20"
-                         calcMode="spline"
-                         keyTimes="0; 1"
-                         keySplines="0.165, 0.84, 0.44, 1"
-                         repeatCount="indefinite" />
-                <animate attributeName="stroke-opacity"
-                         begin="0s" dur="1.8s"
-                         values="1; 0"
-                         calcMode="spline"
-                         keyTimes="0; 1"
-                         keySplines="0.3, 0.61, 0.355, 1"
-                         repeatCount="indefinite" />
-            </circle>
-            <circle cx="22" cy="22" r="1">
-                <animate attributeName="r"
-                         begin="-0.9s" dur="1.8s"
-                         values="1; 20"
-                         calcMode="spline"
-                         keyTimes="0; 1"
-                         keySplines="0.165, 0.84, 0.44, 1"
-                         repeatCount="indefinite" />
-                <animate attributeName="stroke-opacity"
-                         begin="-0.9s" dur="1.8s"
-                         values="1; 0"
-                         calcMode="spline"
-                         keyTimes="0; 1"
-                         keySplines="0.3, 0.61, 0.355, 1"
-                         repeatCount="indefinite" />
-            </circle>
-        </g>
-    </svg>
+    {% include '_partials/_spinner.html.twig' %}
 </div>
diff --git a/templates/_partials/_spinner.html.twig b/templates/_partials/_spinner.html.twig
new file mode 100644
index 0000000..3961ab3
--- /dev/null
+++ b/templates/_partials/_spinner.html.twig
@@ -0,0 +1,41 @@
+<svg class="{{ html_classes(class|default('w-32 h-32 lg:w-48 lg:h-48'), {
+    'text-primary-light': booking_theme() == 'base',
+    'text-sbw-secondary': booking_theme() == 'sbw',
+    'text-snz-secondary': booking_theme() == 'snz',
+    'text-ser-secondary': booking_theme() == 'ser',
+}) }}" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+    <g fill="none" fill-rule="evenodd" stroke-width="2">
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                     begin="0s" dur="1.8s"
+                     values="1; 20"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.165, 0.84, 0.44, 1"
+                     repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                     begin="0s" dur="1.8s"
+                     values="1; 0"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.3, 0.61, 0.355, 1"
+                     repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                     begin="-0.9s" dur="1.8s"
+                     values="1; 20"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.165, 0.84, 0.44, 1"
+                     repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                     begin="-0.9s" dur="1.8s"
+                     values="1; 0"
+                     calcMode="spline"
+                     keyTimes="0; 1"
+                     keySplines="0.3, 0.61, 0.355, 1"
+                     repeatCount="indefinite" />
+        </circle>
+    </g>
+</svg>
diff --git a/templates/booking/create/index.html.twig b/templates/booking/create/index.html.twig
index 23a71e2..00f3569 100644
--- a/templates/booking/create/index.html.twig
+++ b/templates/booking/create/index.html.twig
@@ -10,5 +10,6 @@
          }) }}"
          hx-trigger="load"
          hx-swap="none">
+        {% include '_partials/_spinner.html.twig' %}
     </div>
 {% endblock %}