UX: show loading icon if images are being loaded

src/UI/Image/AttributedImage.svelte

@@ -17,6 +17,7 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import DotMenu from "../Base/DotMenu.svelte"
+  import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
 
   export let image: Partial<ProvidedImage>
   let fallbackImage: string = undefined
@@ -111,7 +112,11 @@
           <slot name="dot-menu-actions" />
         </DotMenu>
       {/if}
+      {#if !loaded}
+        <LoadingPlaceholder />
+      {/if}
       <img
+        class:hidden={!loaded}
         bind:this={imgEl}
         on:load={() => (loaded = true)}
         class={imgClass ?? ""}

src/UI/Image/ImageCarousel.svelte

@@ -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}