fix: incomplete dynamic imports (#23217)

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -440,15 +440,15 @@
 
 {#if latlng && $featureFlags.loaded && $featureFlags.map}
   <div class="h-[360px]">
-    {#await import('../shared-components/map/map.svelte')}
+    {#await import('$lib/components/shared-components/map/map.svelte')}
       {#await delay(timeToLoadTheMap) then}
         <!-- show the loading spinner only if loading the map takes too much time -->
         <div class="flex items-center justify-center h-full w-full">
           <LoadingSpinner />
         </div>
       {/await}
-    {:then component}
-      <component.default
+    {:then { default: Map }}
+      <Map
         mapMarkers={[
           {
             lat: latlng.lat,
@@ -480,7 +480,7 @@
             </a>
           </div>
         {/snippet}
-      </component.default>
+      </Map>
     {/await}
   </div>
 {/if}

web/src/lib/components/share-page/individual-shared-viewer.svelte

@@ -19,7 +19,6 @@
   import { IconButton } from '@immich/ui';
   import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import AssetViewer from '../asset-viewer/asset-viewer.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
@@ -146,6 +145,7 @@
     </section>
   {:else if assets.length === 1}
     {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
+      {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
         <AssetViewer
           {asset}
           showCloseButton={false}
@@ -156,5 +156,6 @@
           onClose={() => {}}
         />
       {/await}
+    {/await}
   {/if}
 </section>

web/src/lib/components/shared-components/change-location.svelte

@@ -173,7 +173,7 @@
 
       <span>{$t('pick_a_location')}</span>
       <div class="h-[500px] min-h-[300px] w-full z-0">
-        {#await import('../shared-components/map/map.svelte')}
+        {#await import('$lib/components/shared-components/map/map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex items-center justify-center h-full w-full">

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -23,7 +23,6 @@
   import { modalManager } from '@immich/ui';
   import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
-  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
   import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
 
   interface Props {
@@ -487,6 +486,7 @@
 <!-- Overlay Asset Viewer -->
 {#if $isViewerOpen}
   <Portal target="body">
+    {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
       <AssetViewer
         asset={$viewingAsset}
         onAction={handleAction}
@@ -498,5 +498,6 @@
           handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
         }}
       />
+    {/await}
   </Portal>
 {/if}

web/src/lib/components/shared-components/map/map.svelte

@@ -1,9 +1,11 @@
 <script lang="ts" module>
+  import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
+  import { addProtocol, setRTLTextPlugin } from 'maplibre-gl';
   import { Protocol } from 'pmtiles';
 
   let protocol = new Protocol();
-  void maplibregl.addProtocol('pmtiles', protocol.tile);
-  void maplibregl.setRTLTextPlugin(mapboxRtlUrl, true);
+  void addProtocol('pmtiles', protocol.tile);
+  void setRTLTextPlugin(mapboxRtlUrl, true);
 </script>
 
 <script lang="ts">
@@ -16,12 +18,20 @@
   import { getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
   import { Icon, modalManager } from '@immich/ui';
-  import mapboxRtlUrl from '@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.min.js?url';
   import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
   import { isEqual, omit } from 'lodash-es';
   import { DateTime, Duration } from 'luxon';
-  import maplibregl, { GlobeControl, type GeoJSONSource, type LngLatLike } from 'maplibre-gl';
+  import {
+    GlobeControl,
+    LngLat,
+    LngLatBounds,
+    Marker,
+    type GeoJSONSource,
+    type LngLatLike,
+    type Map,
+    type MapMouseEvent,
+  } from 'maplibre-gl';
   import { onDestroy, onMount, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
   import {
@@ -37,7 +47,6 @@
     NavigationControl,
     Popup,
     ScaleControl,
-    type Map,
   } from 'svelte-maplibre';
 
   interface Props {
@@ -82,15 +91,15 @@
       return undefined;
     }
 
-    const bounds = new maplibregl.LngLatBounds();
+    const bounds = new LngLatBounds();
     for (const marker of mapMarkers) {
       bounds.extend([marker.lon, marker.lat]);
     }
     return bounds;
   })();
 
-  let map: maplibregl.Map | undefined = $state();
-  let marker: maplibregl.Marker | null = null;
+  let map: Map | undefined = $state();
+  let marker: Marker | null = null;
   let abortController: AbortController;
 
   const theme = $derived($mapSettings.allowDarkMode ? themeManager.value : Theme.LIGHT);
@@ -103,7 +112,7 @@
       }
 
       center = { lng, lat };
-      marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
+      marker = new Marker().setLngLat([lng, lat]).addTo(map);
     }
   }
 
@@ -125,7 +134,7 @@
     onSelect(ids);
   }
 
-  function handleMapClick(event: maplibregl.MapMouseEvent) {
+  function handleMapClick(event: MapMouseEvent) {
     if (clickable) {
       const { lng, lat } = event.lngLat;
       onClickPoint({ lng, lat });
@@ -135,7 +144,7 @@
       }
 
       if (map) {
-        marker = new maplibregl.Marker().setLngLat([lng, lat]).addTo(map);
+        marker = new Marker().setLngLat([lng, lat]).addTo(map);
       }
     }
   }
@@ -157,7 +166,7 @@
 
   const asMarker = (feature: Feature<Geometry, GeoJsonProperties>): MapMarkerResponseDto => {
     const featurePoint = feature as FeaturePoint;
-    const coords = maplibregl.LngLat.convert(featurePoint.geometry.coordinates as [number, number]);
+    const coords = LngLat.convert(featurePoint.geometry.coordinates as [number, number]);
     return {
       lat: coords.lat,
       lon: coords.lng,
@@ -294,7 +303,7 @@
   fitBoundsOptions={{ padding: 50, maxZoom: 15 }}
   attributionControl={false}
   diffStyleUpdates={true}
-  onload={(event) => {
+  onload={(event: Map) => {
     event.setMaxZoom(18);
     event.on('click', handleMapClick);
     if (!simplified) {
@@ -303,7 +312,7 @@
   }}
   bind:map
 >
-  {#snippet children({ map }: { map: maplibregl.Map })}
+  {#snippet children({ map }: { map: Map })}
     {#if showSimpleControls}
       <NavigationControl position="top-left" showCompass={!simplified} />
 

web/src/lib/components/timeline/TimelineAssetViewer.svelte

@@ -169,7 +169,7 @@
   };
 </script>
 
-{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+{#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
   <AssetViewer
     {withStacked}
     asset={$viewingAsset}

web/src/lib/modals/MapModal.svelte

@@ -17,7 +17,7 @@
   <ModalBody>
     <div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
       <div class="h-[75vh] min-h-[300px] w-full">
-        {#await import('../components/shared-components/map/map.svelte')}
+        {#await import('$lib/components/shared-components/map/map.svelte')}
           {#await delay(timeToLoadTheMap) then}
             <!-- show the loading spinner only if loading the map takes too much time -->
             <div class="flex items-center justify-center h-full w-full">

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { goto } from '$app/navigation';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import Map from '$lib/components/shared-components/map/map.svelte';
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, timeToLoadTheMap } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handlePromiseError } from '$lib/utils';
+  import { delay } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
+  import { LoadingSpinner } from '@immich/ui';
   import { onDestroy } from 'svelte';
+  import { run } from 'svelte/legacy';
   import type { PageData } from './$types';
 
   interface Props {
@@ -72,12 +72,21 @@
 {#if $featureFlags.loaded && $featureFlags.map}
   <UserPageLayout title={data.meta.title}>
     <div class="isolate h-full w-full">
+      {#await import('$lib/components/shared-components/map/map.svelte')}
+        {#await delay(timeToLoadTheMap) then}
+          <!-- show the loading spinner only if loading the map takes too much time -->
+          <div class="flex items-center justify-center h-full w-full">
+            <LoadingSpinner />
+          </div>
+        {/await}
+      {:then { default: Map }}
         <Map hash onSelect={onViewAssets} />
+      {/await}
     </div>
   </UserPageLayout>
   <Portal target="body">
     {#if $showAssetViewer}
-      {#await import('../../../../../lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+      {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
         <AssetViewer
           asset={$viewingAsset}
           showNavigation={viewingAssets.length > 1}