From 2e5c31d117ddb586b33818d2f3eb08a463b85763 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Mon, 23 Mar 2026 07:30:00 +0100
Subject: [PATCH] Add animated progress bar during route computation

Blue sliding progress bar appears at the top of the map while
BRouter is computing a route. Overlays on top of Leaflet map
with z-index 1000.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/SessionView.tsx | 9 ++++++++-
 packages/ui/src/styles.css                  | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx
index f8ad6f1..abe0e4c 100644
--- a/apps/planner/app/components/SessionView.tsx
+++ b/apps/planner/app/components/SessionView.tsx
@@ -55,7 +55,14 @@ export function SessionView({ sessionId }: { sessionId: string }) {
       </header>
       <div className="flex flex-1 overflow-hidden">
         <main className="flex-1 flex flex-col">
-          <div className="flex-1">
+          <div className="relative flex-1">
+            {computing && (
+              <div className="absolute inset-x-0 top-0 z-[1000]">
+                <div className="h-1 w-full overflow-hidden bg-blue-100">
+                  <div className="h-full w-1/3 animate-[slide_1s_ease-in-out_infinite] bg-blue-500" />
+                </div>
+              </div>
+            )}
             <Suspense
               fallback={
                 <div className="flex h-full items-center justify-center bg-gray-100 text-gray-500">
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index f1d8c73..2fa790e 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -1 +1,6 @@
 @import "tailwindcss";
+
+@keyframes slide {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}