immich/web/src/lib/modals/MapModal.svelte

<script lang="ts">
  import { timeToLoadTheMap } from '$lib/constants';
  import { delay } from '$lib/utils/asset-utils';
  import type { MapMarkerResponseDto } from '@immich/sdk';
  import { LoadingSpinner, Modal, ModalBody } from '@immich/ui';
  import { t } from 'svelte-i18n';

  type Props = {
    onClose: (assetIds?: string[]) => void;
    mapMarkers: MapMarkerResponseDto[];
  };

  let { onClose, mapMarkers }: Props = $props();
</script>

<Modal title={$t('map')} size="giant" {onClose}>
  <ModalBody>
    <div class="flex size-full flex-col gap-2 rounded-2xl border border-gray-300 dark:border-light">
      <div class="h-[75vh] min-h-[300px] 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 size-full items-center justify-center">
              <LoadingSpinner />
            </div>
          {/await}
        {:then { default: Map }}
          <Map clickable={false} {mapMarkers} onSelect={onClose} showSettings={false} rounded autoFitBounds />
        {/await}
      </div>
    </div>
  </ModalBody>
</Modal>