From 7949c3ce5e0ca837fd681af632a4236c90b874cc Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Wed, 15 Nov 2023 17:44:08 +0100
Subject: [PATCH] Improve image load transition for faster loading times

---
 src/lib/components/LazyImage.svelte      | 38 +++++++++++++++---------
 src/routes/plants/[plant]/TempBar.svelte |  2 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index 8e8fdd6..c1c9ec0 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -15,14 +15,31 @@
 
   let imgref: Img;
   let loaded: boolean = false;
+  let quickloaded: boolean = false;
+  let loadStart = Date.now();
 
   onMount(() => {
-    if (imgref && imgref.complete) loaded = true;
+    loadStart = Date.now();
+    if (imgref && imgref.complete) quickloaded = true;
   });
 </script>
 
-<Img bind:imgref {src} {alt} {...$$restProps} on:load={() => (loaded = true)} />
-<div class="blur" class:loaded />
+<Img
+  bind:imgref
+  {src}
+  {alt}
+  {...$$restProps}
+  on:load={() => {
+    if (Date.now() - loadStart > 500) {
+      console.log("slow");
+      loaded = true;
+    } else {
+      console.log("quick");
+      quickloaded = true;
+    }
+  }}
+/>
+<div class="blur" class:loaded class:quickloaded />
 
 <style lang="scss">
   @use "../../colors.scss";
@@ -33,26 +50,19 @@
     inset: 0;
     backdrop-filter: blur(20px);
     pointer-events: none;
-    transition-duration: 0.8s;
     opacity: 1;
     animation: loading;
     animation-duration: 0.8s;
     animation-iteration-count: infinite;
   }
+  .quickloaded {
+    opacity: 0;
+  }
   .loaded {
     opacity: 0;
-    animation: fade 2s bezier;
+    transition-duration: 1s;
   }
 
-  @keyframes fade {
-    0%,
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
   @keyframes loading {
     0%,
     100% {
diff --git a/src/routes/plants/[plant]/TempBar.svelte b/src/routes/plants/[plant]/TempBar.svelte
index df3a7ae..5f0f439 100644
--- a/src/routes/plants/[plant]/TempBar.svelte
+++ b/src/routes/plants/[plant]/TempBar.svelte
@@ -14,7 +14,7 @@
     aria-hidden="true"
   >
     <p>
-      <i class="ri-skull-fill icon" aria-hidden="true" /> &lt; {temp.death}} °C
+      <i class="ri-skull-fill icon" aria-hidden="true" /> &lt; {temp.death} °C
     </p>
   </div>
   <div