loviuz/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: show loading icon if images are being loaded

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-01-17 16:01:40 +01:00
parent d7509c8d6f
commit 32993df92a
7 changed files with 97 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/UI/Image/ImageCarousel.svelte
View file

@ -3,14 +3,28 @@
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import DeletableImage from "./DeletableImage.svelte"
import Loading from "../Base/Loading.svelte"
import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
export let images: Store<ProvidedImage[]>
export let state: SpecialVisualizationState
export let tags: UIEventSource<Record<string, string>>
</script>
<div class="flex w-full space-x-2 overflow-x-auto" style="scroll-snap-type: x proximity">
{#each $images as image (image.url)}
<DeletableImage {image} {state} {tags} />
{/each}
</div>
export let estimated: Store<number>
images.addCallbackAndRun(imgs => {
console.log(">>><<< imgs are", imgs)
})
</script>
{#if $estimated > 0 && $images.length < 1}
<LoadingPlaceholder />
{:else}
<div class="w-full overflow-x-auto" style="scroll-snap-type: x proximity">
<div class="flex space-x-2">
{#each $images as image (image.url)}
<DeletableImage {image} {state} {tags} />
{/each}
</div>
</div>
{/if}