From 7bc1f7714c1c0d7266b96b4bacae5fc56e33eb0a Mon Sep 17 00:00:00 2001
From: Thilo Maier <thilo.maier@impierce.com>
Date: Thu, 16 May 2024 15:01:10 +0200
Subject: [PATCH] Await img src properly

---
 unime/src/lib/components/atoms/Image.svelte | 46 ++++++++++-----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/unime/src/lib/components/atoms/Image.svelte b/unime/src/lib/components/atoms/Image.svelte
index 397d34c80..2d7c976a7 100644
--- a/unime/src/lib/components/atoms/Image.svelte
+++ b/unime/src/lib/components/atoms/Image.svelte
@@ -21,16 +21,11 @@
   export let id: string;
   export let iconFallback: Icon = 'User';
   export let isTempAsset = false;
-  let assetUrl: string | null = null;
 
-  async function loadImage() {
-    getImageAsset(id, isTempAsset).then((url) => {
-      assetUrl = url;
-    });
-  }
+  let assetUrl: Promise<string | null>;
 
   onMount(() => {
-    loadImage();
+    assetUrl = getImageAsset(id, isTempAsset);
   });
 </script>
 
@@ -53,21 +48,24 @@ Displays an image (loaded from disk) or a fallback component.
 <Image id={'3cf73ecb'} iconFallback={'Bank'} imgClass="h-[64px] w-[64px]" />
 ```
 -->
-{#if assetUrl}
-  <img
-    src={assetUrl}
-    alt="img_{id}"
-    class={twMerge('max-h-full w-full overflow-hidden bg-white object-contain', $$props.imgClass)}
-    on:error={() => warn(`Could not load image: ${id}`)}
-    on:load={() => debug(`Image successfully loaded: ${assetUrl}`)}
-    data-testid="image"
-  />
-{:else}
-  <slot name="fallback">
-    <svelte:component
-      this={icons[iconFallback]}
-      class={twMerge('h-[18px] w-[18px] text-slate-800 dark:text-grey', $$props.iconClass)}
-      data-testid="icon"
+
+{#await assetUrl then src}
+  {#if src}
+    <img
+      {src}
+      alt="img_{id}"
+      class={twMerge('max-h-full w-full overflow-hidden bg-white object-contain', $$props.imgClass)}
+      on:error={() => warn(`Could not load image: ${id}`)}
+      on:load={() => debug(`Image successfully loaded: ${assetUrl}`)}
+      data-testid="image"
     />
-  </slot>
-{/if}
+  {:else}
+    <slot name="fallback">
+      <svelte:component
+        this={icons[iconFallback]}
+        class={twMerge('h-[18px] w-[18px] text-slate-800 dark:text-grey', $$props.iconClass)}
+        data-testid="icon"
+      />
+    </slot>
+  {/if}
+{/await}