fix(web): loading leaflet in production builds (#2526)

web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte

@@ -17,9 +17,7 @@
 	import { getMapContext } from './map.svelte';
 
 	class AssetMarker extends Marker {
-		marker: MapMarkerResponseDto;
-
-		constructor(marker: MapMarkerResponseDto) {
+		constructor(private marker: MapMarkerResponseDto) {
 			super([marker.lat, marker.lon], {
 				icon: new Icon({
 					iconUrl: api.getAssetThumbnailUrl(marker.id),
@@ -33,7 +31,11 @@
 				})
 			});
 
-			this.marker = marker;
+			this.on('click', this.onClick);
+		}
+
+		onClick() {
+			dispatch('view', { assets: [this.marker.id] });
 		}
 
 		getAssetId(): string {
@@ -77,20 +79,16 @@
 		cluster.on('clustermouseout', (event: LeafletEvent) => {
 			event.sourceTarget.unspiderfy();
 		});
-
-		for (let marker of markers) {
-			const leafletMarker = new AssetMarker(marker);
-
-			leafletMarker.on('click', () => {
-				dispatch('view', { assets: [marker.id] });
-			});
-
-			cluster.addLayer(leafletMarker);
-		}
-
 		map.addLayer(cluster);
 	});
 
+	$: if (cluster) {
+		const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
+
+		cluster.clearLayers();
+		cluster.addLayers(leafletMarkers);
+	}
+
 	onDestroy(() => {
 		if (cluster) cluster.remove();
 	});

web/src/routes/(user)/map/+page.svelte

@@ -16,14 +16,16 @@
 
 	export let data: PageData;
 
-	let mapMarkersPromise: Promise<MapMarkerResponseDto[]>;
+	let leaflet: typeof import('$lib/components/shared-components/leaflet');
+	let mapMarkers: MapMarkerResponseDto[];
 	let abortController = new AbortController();
 	let viewingAssets: string[] = [];
 	let viewingAssetCursor = 0;
 	let showSettingsModal = false;
 
 	onMount(() => {
-		mapMarkersPromise = loadMapMarkers();
+		loadMapMarkers().then((data) => (mapMarkers = data));
+		import('$lib/components/shared-components/leaflet').then((data) => (leaflet = data));
 	});
 
 	onDestroy(() => {
@@ -69,8 +71,8 @@
 
 <UserPageLayout user={data.user} title={data.meta.title}>
 	<div class="h-full w-full isolate">
-		{#await import('$lib/components/shared-components/leaflet') then { Map, TileLayer, AssetMarkerCluster, Control }}
-			{#await mapMarkersPromise then mapMarkers}
+		{#if leaflet && mapMarkers}
+			{@const { Map, TileLayer, AssetMarkerCluster, Control } = leaflet}
 			<Map
 				center={getMapCenter(mapMarkers)}
 				zoom={7}
@@ -104,8 +106,7 @@
 					</button>
 				</Control>
 			</Map>
-			{/await}
-		{/await}
+		{/if}
 	</div>
 </UserPageLayout>
 
@@ -133,8 +134,7 @@
 			$mapSettings = detail;
 
 			if (shouldUpdate) {
-				const markers = await loadMapMarkers();
-				mapMarkersPromise = Promise.resolve(markers);
+				mapMarkers = await loadMapMarkers();
 			}
 		}}
 	/>