From 94bbfe98ef617a1eb087eeb8be6f8fdbb23402f7 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Sat, 20 Apr 2024 22:10:19 -0400
Subject: [PATCH] proper fancy image loading for buttons

---
 src/lib/components/ImgButton.svelte | 34 ++++++++++++++++++-----------
 src/routes/+page.svelte             |  2 +-
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/ImgButton.svelte b/src/lib/components/ImgButton.svelte
index df90580..1db62a6 100644
--- a/src/lib/components/ImgButton.svelte
+++ b/src/lib/components/ImgButton.svelte
@@ -1,12 +1,13 @@
 <script>
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import Eye from './Icons/Eye.svelte';
 
 	/** @type {string} src */
 	export let src;
 
-	/** @type {string=} href */
-	export let href;
+	/** @type {string|undefined} href */
+	export let href = undefined;
 
 	/** @type {HTMLImageElement} e */
 	let e;
@@ -27,22 +28,29 @@
 			e.style.boxShadow = `${(-3 * xP).toFixed(2)}px ${(5 * yP).toFixed(2)}px 3px #c4bef3`;
 		};
 
-		e.addEventListener('mouseover', startEffect);
-		e.addEventListener('mousemove', startEffect);
-		e.addEventListener('mouseleave', () => {
-			e.style.transform = '';
-			e.style.boxShadow = '';
-		});
+		if (src) {
+			const preload = new Image();
+			preload.src = src;
+			preload.onload = () => {
+				loaded = true;
 
-		const preload = new Image();
-		preload.src = src;
-		preload.onload = () => (loaded = true);
+				e.addEventListener('mouseover', startEffect);
+				e.addEventListener('mousemove', startEffect);
+				e.addEventListener('mouseleave', () => {
+					e.style.transform = '';
+					e.style.boxShadow = '';
+				});
+			};
+		}
 	});
 </script>
 
 <a class="hover:shadow-2xl" {href} target="_blank">
-	<img in:fade class="imgbutton {!loaded && 'hidden'}" {src} alt="Button" bind:this={e} />
-	<div class="animate-pulse imgbutton bg-neutral-600/50 rounded-sm {loaded && 'hidden'}"></div>
+	{#if loaded}
+		<img in:fade class="imgbutton" {src} alt="Button" bind:this={e} />
+	{:else}
+		<div class="rounded-sm animate-pulse imgbutton bg-neutral-600/50"></div>
+	{/if}
 </a>
 
 <style lang="postcss">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index adc4746..99042f5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -92,7 +92,7 @@
 				<ImgButton href="https://split.pet" src="/buttons/split.png"></ImgButton>
 				<ImgButton href="https://www.mozilla.org/en-US/firefox/new/" src="/buttons/firefox.gif"
 				></ImgButton>
-				<ImgButton src="/buttons/lol.gif" href=""></ImgButton>
+				<ImgButton src="/buttons/lol.gif"></ImgButton>
 			</div>
 		</div>
 	</div>