feat(BadgePreview): image lazy loading

1 files changed, 17 insertions, 1 deletions

diff --git a/src/lib/BadgeWall/BadgePreview.svelte b/src/lib/BadgeWall/BadgePreview.svelte
index 6515bc19..0f9cab1c 100644
--- a/src/lib/BadgeWall/BadgePreview.svelte
+++ b/src/lib/BadgeWall/BadgePreview.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { thumbnail } from '$lib/Utility/image.js';
 	import type { Badge } from '$lib/Database/userBadges';
 	import { cdn } from '$lib/Utility/image';
 	import { databaseTimeToDate } from '$lib/Utility/time';
 	import locale from '$stores/locale';
+	import { onMount } from 'svelte';
 	import { cubicOut } from 'svelte/easing';
 	import { tweened } from 'svelte/motion';
 
@@ -35,6 +37,19 @@
 	const handleMouseLeave = () => {
 		$mouse = { x: 0, y: 0 };
 	};
+
+	onMount(() => {
+		if (badge && badge.image) {
+			const image = new Image();
+
+			image.src = cdn(badge.image) || '';
+
+			image.onload = () => {
+				badgeReference.src = image.src;
+				console.log('loaded');
+			};
+		}
+	});
 </script>
 
 {#if badge}
@@ -47,7 +62,7 @@
 				class="badge-container"
 			>
 				<img
-					src={cdn(badge.image)}
+					src={cdn(thumbnail(badge.image))}
 					bind:this={badgeReference}
 					style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
 						10}deg);"
@@ -122,6 +137,7 @@
 	.badge-preview img {
 		border-radius: 8px;
 		max-width: 25vh;
+		width: 100%;
 	}
 
 	.badge-container {