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,6 +11,28 @@
 
 	let markerGroupLayer = null;
 
+	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) {
+			points = [
+				{
+					coords: setViewLocation,
+					content: `Lat: ${setViewLocation[0]}, Lng: ${setViewLocation[1]}`
+				}
+			];
+		}
+
+		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			attribution:
+				'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(map);
+
 		const setMarkers = (points) => {
 			if (map) {
 				if (markerGroupLayer) {
@@ -36,23 +56,6 @@
 			}
 		};
 
-	onMount(async () => {
-		map = L.map(mapElement).setView(setViewLocation ? setViewLocation : [51.505, -0.09], 10);
-
-		if (setViewLocation) {
-			points = [
-				{
-					coords: setViewLocation,
-					content: `Lat: ${setViewLocation[0]}, Lng: ${setViewLocation[1]}`
-				}
-			];
-		}
-
-		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-			attribution:
-				'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-		}).addTo(map);
-
 		setMarkers(points);
 
 		map.on('click', (e) => {