feat: add smooth fade-in transition for route polylines

src/components/map/RouteMap.svelte

@@ -55,13 +55,12 @@
 			shapeData = await shapeResponse.json();
 			const shapePoints = shapeData?.data?.entry?.points;
 			if (shapePoints && isMounted) {
-				await mapProvider.createPolyline(shapePoints);
+				await mapProvider.createPolyline(shapePoints, { animate: true });
 			}
 		}
 
 		const stopTimes = tripData?.data?.entry?.schedule?.stopTimes ?? [];
 		const stops = tripData?.data?.references?.stops ?? [];
-		// TODO: implement better way to transition to route shape
 		const location = calculateMidpoint(stops);
 
 		if (location) {

src/components/search/SearchPane.svelte

@@ -133,7 +133,7 @@
 			for (const polylineData of polylinesData) {
 				const shape = polylineData.points;
 				let polyline;
-				polyline = mapProvider.createPolyline(shape);
+				polyline = mapProvider.createPolyline(shape, { animate: true });
 				polylines.push(polyline);
 			}
 

src/lib/Provider/OpenStreetMapProvider.svelte.js

@@ -454,6 +454,26 @@ export default class OpenStreetMapProvider {
 		}).addTo(this.map);
 	}
 
+	animatePolylineOpacity(polyline, targetOpacity = 1, durationMs = 350) {
+		if (!browser || !this.map || !polyline) return;
+		if (typeof requestAnimationFrame !== 'function') return;
+
+		const startTime = performance.now();
+		const tick = (now) => {
+			// Stop animation if polyline was removed/detached.
+			if (!this.map || !this.map.hasLayer(polyline)) return;
+
+			const progress = Math.min((now - startTime) / durationMs, 1);
+			polyline.setStyle({ opacity: targetOpacity * progress });
+
+			if (progress < 1) {
+				requestAnimationFrame(tick);
+			}
+		};
+
+		requestAnimationFrame(tick);
+	}
+
 	createPolyline(points, options = {}) {
 		if (!browser || !this.map) return null;
 
@@ -470,6 +490,11 @@ export default class OpenStreetMapProvider {
 			weight: options.weight || 4,
 			opacity: options.opacity ?? 1
 		};
+		const animate = options.animate ?? false;
+		const targetOpacity = polylineOpts.opacity;
+		if (animate) {
+			polylineOpts.opacity = 0;
+		}
 		if (options.dashArray) {
 			polylineOpts.dashArray = options.dashArray;
 		}
@@ -499,6 +524,10 @@ export default class OpenStreetMapProvider {
 
 		polyline.arrowDecorator = arrowDecorator;
 
+		if (animate) {
+			this.animatePolylineOpacity(polyline, targetOpacity);
+		}
+
 		return polyline;
 	}