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>
This commit is contained in:
parent
6ee07f0570
commit
2e5c31d117
2 changed files with 13 additions and 1 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue