feat(directions): on-demand road-data layer loading with loading-state CTA

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}
 

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)}