From 8b6ee877f08a584df7d3bc8706292b6eeb11f030 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 26 Dec 2023 12:26:26 +0100
Subject: [PATCH] Fix: actually show HD image for nearby streetview imager, add
 loading indicator

---
 src/UI/Image/ImageOperations.svelte | 11 ++++++++++-
 src/UI/Image/ImagePreview.svelte    |  7 +++++--
 src/UI/Image/LinkableImage.svelte   |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/UI/Image/ImageOperations.svelte b/src/UI/Image/ImageOperations.svelte
index 404c3cbc6..ac916cbda 100644
--- a/src/UI/Image/ImageOperations.svelte
+++ b/src/UI/Image/ImageOperations.svelte
@@ -9,9 +9,13 @@
   import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { Utils } from "../../Utils"
   import { twMerge } from "tailwind-merge"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import Loading from "../Base/Loading.svelte"
 
   export let image: ProvidedImage
   export let clss: string = undefined
+  
+  let isLoaded = new UIEventSource(false)
   async function download() {
     const response = await fetch(image.url_hd ?? image.url)
     const blob = await response.blob()
@@ -23,7 +27,12 @@
 
 <div class={twMerge("relative h-full w-full", clss)}>
   <div class="panzoom-container focusable absolute top-0 left-0 h-full w-full overflow-hidden">
-    <ImagePreview {image} />
+    {#if !$isLoaded}
+      <div class="w-full h-full flex items-center justify-center">
+        <Loading/>
+      </div>
+      {/if}
+    <ImagePreview {image} {isLoaded}/>
   </div>
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
diff --git a/src/UI/Image/ImagePreview.svelte b/src/UI/Image/ImagePreview.svelte
index f8d992716..14b47e548 100644
--- a/src/UI/Image/ImagePreview.svelte
+++ b/src/UI/Image/ImagePreview.svelte
@@ -4,10 +4,12 @@
    */
   import panzoom from "panzoom"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import { UIEventSource } from "../../Logic/UIEventSource"
 
   export let image: ProvidedImage
   let panzoomInstance = undefined
   let panzoomEl: HTMLElement
+  export let isLoaded: UIEventSource<boolean> = undefined
 
   $: {
     if (panzoomEl) {
@@ -16,7 +18,7 @@
         boundsPadding: 0.49,
         minZoom: 1,
         maxZoom: 25,
-        initialZoom: 1.2,
+        initialZoom: 1.0,
       })
     } else {
       panzoomInstance?.dispose()
@@ -24,4 +26,5 @@
   }
 </script>
 
-<img bind:this={panzoomEl} src={image.url_hd ?? image.url} class="panzoom-image h-fit w-fit" />
+<img bind:this={panzoomEl} class="panzoom-image h-fit w-fit" on:load={() => {isLoaded?.setData(true)}}
+     src={image.url_hd ?? image.url} />
diff --git a/src/UI/Image/LinkableImage.svelte b/src/UI/Image/LinkableImage.svelte
index 66ebe3b52..572cc6776 100644
--- a/src/UI/Image/LinkableImage.svelte
+++ b/src/UI/Image/LinkableImage.svelte
@@ -29,6 +29,7 @@
   const c = [lon, lat]
   const providedImage: ProvidedImage = {
     url: image.thumbUrl ?? image.pictureUrl,
+    url_hd: image.pictureUrl,
     key: undefined,
     provider: AllImageProviders.byName(image.provider),
     date: new Date(image.date),