From e7018c953984c41eec68c0574d689c7da24d3e08 Mon Sep 17 00:00:00 2001
From: Nick Bland <nick.bland@nickbland.dev>
Date: Thu, 25 Apr 2024 23:42:43 +1000
Subject: [PATCH] Implement dirty skeleton image system

+ Image now does not load from top down, it is either skeleton component from DaisyUI or fully loaded image. Just makes it look cleaner overall.
---
 .../components/portfolio/skeletonImage.svelte | 22 +++++++++++++++++++
 src/routes/+page.svelte                       |  7 ++----
 2 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/portfolio/skeletonImage.svelte

diff --git a/src/lib/components/portfolio/skeletonImage.svelte b/src/lib/components/portfolio/skeletonImage.svelte
new file mode 100644
index 0000000..b26e1a8
--- /dev/null
+++ b/src/lib/components/portfolio/skeletonImage.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  export let src: string;
+  export let altText: string = "";
+
+  let loaded = false;
+
+  onMount(() => {
+    const img = new Image();
+    img.src = src;
+
+    img.onload = () => {
+      loaded = true;
+    };
+  });
+</script>
+
+{#if loaded}
+  <img {src} class="w-48 h-64 shadow-2xl max-w-sm rounded-2xl" alt={altText} />
+{:else}
+  <div class="skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl" />
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e49933f..b123b56 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import SkeletonImage from "$lib/components/portfolio/skeletonImage.svelte";
   import Divider from "$lib/components/portfolio/divider.svelte";
   import Countdown from "$lib/components/portfolio/countdown.svelte";
   import TextContent from "$lib/components/portfolio/textContent.svelte";
@@ -11,11 +12,7 @@
 >
   <div class="hero-overlay bg-opacity-30"></div>
   <div class="hero-content text-left text-accent-content flex-col lg:flex-row">
-    <img
-      class=" skeleton w-48 h-64 shadow-2xl max-w-sm rounded-2xl"
-      alt="what i look like!"
-      src="https://cdn.nickbland.dev/nickbland%2Fstatic%2Fimages%2Fprofile.webp"
-    />
+    <SkeletonImage src="https://cdn.nickbland.dev/nickbland%2Fstatic%2Fimages%2Fprofile.webp" altText="Profile of me." />
     <div>
       <h1 class="mb-6 text-6xl font-bold text-wrap text-center text-primary-content">
         Hello, my name is Nick