From 85ffece36797684e8ad957db336f93d648080ff4 Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Tue, 16 Jul 2024 22:12:06 +0100
Subject: [PATCH] Clear thumb after load

---
 packages/website/src/lib/htmlComponents/img.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/website/src/lib/htmlComponents/img.svelte b/packages/website/src/lib/htmlComponents/img.svelte
index 250ee3e3..fbae4f49 100644
--- a/packages/website/src/lib/htmlComponents/img.svelte
+++ b/packages/website/src/lib/htmlComponents/img.svelte
@@ -6,6 +6,7 @@
     // console.log("imgcmp", thumb);
     let className = "";
     export { className as class };
+    let loaded = false
     // console.log(src)
     // import _PastedImage20240716123726Png from "./Pasted%20image%2020240716123726.png?meta";
 </script>
@@ -17,7 +18,8 @@
         {title}
         width={thumb?.originalWidth}
         height={thumb?.originalHeight}
-        style:background-image="url('{thumb?.thumbSrc}')"
+        style:background-image={loaded ? "none" : `url('${thumb?.thumbSrc}')`}
+        on:load={() => loaded = true}
     />
     {#if title}
         <figcaption>{title}</figcaption>
@@ -28,6 +30,7 @@
     img {
         max-height: 60vh;
         background-size: cover;
+        background-repeat: no-repeat;
         width: auto;
         height: auto;
         display: block;