From 9a194c69f05abf97ee1bfc4b3f906a3c553082f4 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 23:12:25 +0200
Subject: [PATCH] UX: only load magnifying button when image is loaded

---
 src/UI/Image/AttributedImage.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte
index c95b45d2b3..91f8bfd862 100644
--- a/src/UI/Image/AttributedImage.svelte
+++ b/src/UI/Image/AttributedImage.svelte
@@ -19,12 +19,14 @@
   export let previewedImage: UIEventSource<ProvidedImage> = undefined
   export let attributionFormat: "minimal" | "medium" | "large" = "medium"
   let canZoom = previewedImage !== undefined // We check if there is a SOURCE, not if there is data in it!
+  let loaded = false
 </script>
 
 <div class="relative shrink-0">
   <div class="relative w-fit">
     <img
       bind:this={imgEl}
+      on:load={() => loaded = true}
       class={imgClass ?? ""}
       class:cursor-zoom-in={previewedImage !== undefined}
       on:click={() => {
@@ -38,7 +40,7 @@
       src={image.url}
     />
 
-    {#if canZoom}
+    {#if canZoom && loaded}
       <div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full">
       <MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" />
       </div>