mirror of
https://github.com/immich-app/immich
synced 2026-08-22 13:13:05 +00:00
33 lines
1.2 KiB
Svelte
33 lines
1.2 KiB
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>
|