Merge pull request #17503 from ShirasawaSama/patch-13

feat: Dynamically load leaflet to improve first-screen loading speed (-454KB)

src/lib/components/common/Valves/MapSelector.svelte

@@ -1,6 +1,4 @@
 <script>
-	import L from 'leaflet';
-	import 'leaflet/dist/leaflet.css';
 	import { onMount, onDestroy } from 'svelte';
 
 	let map;
@@ -13,30 +11,12 @@
 
 	let markerGroupLayer = null;
 
-	const setMarkers = (points) => {
-		if (map) {
-			if (markerGroupLayer) {
-				map.removeLayer(markerGroupLayer);
-			}
-
-			let markers = [];
-			for (let point of points) {
-				const marker = L.marker(point.coords).bindPopup(point.content);
-
-				markers.push(marker);
-			}
-
-			markerGroupLayer = L.featureGroup(markers).addTo(map);
-
-			try {
-				map.fitBounds(markerGroupLayer.getBounds(), {
-					maxZoom: Math.max(map.getZoom(), 13)
-				});
-			} catch (error) {}
-		}
-	};
-
 	onMount(async () => {
+		const [{ default: L }] = await Promise.all([
+			import('leaflet'),
+			import('leaflet/dist/leaflet.css')
+		]);
+
 		map = L.map(mapElement).setView(setViewLocation ? setViewLocation : [51.505, -0.09], 10);
 
 		if (setViewLocation) {
@@ -53,6 +33,29 @@
 				'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 		}).addTo(map);
 
+		const setMarkers = (points) => {
+			if (map) {
+				if (markerGroupLayer) {
+					map.removeLayer(markerGroupLayer);
+				}
+
+				let markers = [];
+				for (let point of points) {
+					const marker = L.marker(point.coords).bindPopup(point.content);
+
+					markers.push(marker);
+				}
+
+				markerGroupLayer = L.featureGroup(markers).addTo(map);
+
+				try {
+					map.fitBounds(markerGroupLayer.getBounds(), {
+						maxZoom: Math.max(map.getZoom(), 13)
+					});
+				} catch (error) {}
+			}
+		};
+
 		setMarkers(points);
 
 		map.on('click', (e) => {