From 0b3184ba5619e5847c21f2ccced954b91714c4e0 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Mon, 16 Dec 2024 13:36:01 +0100
Subject: [PATCH] Move image fetching out of LazyImage component into lib

---
 src/lib/components/LazyImage.svelte | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index f9a9b78..dd96467 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { HTMLImgAttributes } from "svelte/elements";
   import { lazyload } from "$lib/lazyload";
+  import { fetch_image_base64 } from "$lib/image";
 
   interface LazyImageProps extends HTMLImgAttributes {
     /** The URL to the image resource to lazyload */
@@ -9,20 +10,6 @@
 
   let { src, ...restProps }: LazyImageProps = $props();
 
-  const blobToBase64 = (blob: Blob): Promise<any> => {
-    return new Promise((resolve, _) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result);
-      reader.readAsDataURL(blob);
-    });
-  };
-
-  const loadImage = async (url: string): Promise<any> => {
-    return await fetch(url)
-      .then((response) => response.blob())
-      .then((blob) => blobToBase64(blob));
-  };
-
   const lazy_visible_handler = () => {
     load = true;
   };
@@ -33,9 +20,7 @@
 
 <div use:lazyload onLazyVisible={lazy_visible_handler}>
   {#if load}
-    {#await loadImage(src)}
-      <!-- Loading... -->
-    {:then data}
+    {#await fetch_image_base64(src) then data}
       <img src={data} style="width: 100%" {...restProps} />
     {/await}
   {/if}