From 9ef58e62c8b9980272327131c55dcc4f3971fb54 Mon Sep 17 00:00:00 2001
From: hermes-explorigin <tim+hermes@thecookiejar.me>
Date: Mon, 10 Aug 2026 15:29:38 +0000
Subject: [PATCH] feat(directions): on-demand road-data layer loading with
 loading-state CTA

---
 src/lib/components/DirectionsPanel.svelte | 7 ++++++-
 src/lib/components/MapView.svelte         | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/DirectionsPanel.svelte b/src/lib/components/DirectionsPanel.svelte
index 345005d..42b609e 100644
--- a/src/lib/components/DirectionsPanel.svelte
+++ b/src/lib/components/DirectionsPanel.svelte
@@ -18,6 +18,8 @@
 		graphLabel?: string;
 		/** Called by the on-demand CTA to load the routable layer. */
 		onLoadGraph?: () => void;
+		/** True while the road data layer is being loaded on demand. */
+		graphLoading?: boolean;
 		/** Loaded POIs available for avoidance + search. */
 		searchables: Searchable[];
 		/** Live route progress (0..1) while computing. */
@@ -42,6 +44,7 @@
 		hasGraph,
 		graphLabel = 'the road data layer',
 		onLoadGraph,
+		graphLoading = false,
 		searchables = [],
 		progress = 0,
 		computing = false,
@@ -245,7 +248,9 @@
 		<div class="cta">
 			<strong>Road data layer needed for route computation</strong>
 			<p>The {graphLabel} isn't loaded yet. Load it to enable routing.</p>
-			<button class="cta-btn" onclick={() => onLoadGraph?.()} disabled={computing}>Load road data</button>
+			<button class="cta-btn" onclick={() => onLoadGraph?.()} disabled={computing || graphLoading}>
+			{graphLoading ? 'Loading road data…' : 'Load road data'}
+		</button>
 		</div>
 	{/if}
 
diff --git a/src/lib/components/MapView.svelte b/src/lib/components/MapView.svelte
index 005d3dc..683ea90 100644
--- a/src/lib/components/MapView.svelte
+++ b/src/lib/components/MapView.svelte
@@ -581,6 +581,7 @@
 				hasGraph={!!routeGraph}
 				graphLabel={graphLabel}
 				onLoadGraph={() => loadRouteGraph(true)}
+				graphLoading={routeLoading}
 				searchables={searchables}
 				savedPoints={savedPointsList}
 				onPickSavedPoint={(p) => setSavedPointAsOrigin(p)}