feat: loading state

svelte/src/routes/+page.svelte

@@ -6,14 +6,25 @@
 	import { onMount } from "svelte";
 
 	// Variables
-	let canvas: HTMLCanvasElement;
+	let loading = false;
 	let isDragging = false;
 	let x = 0;
 	let y = 0;
 	let lastX = 0;
 	let lastY = 0;
 
-	onMount(() => init());
+	onMount(async () => {
+		try {
+			loading = true;
+			await init();
+			loading = false;
+		} catch (error) {
+			console.log("[ERROR]:");
+			console.error(error);
+		} finally {
+			loading = false;
+		}
+	});
 
 	function handleMouseDown(e: MouseEvent) {
 		isDragging = true;
@@ -29,26 +40,35 @@
 			y += deltaY;
 			lastX = e.clientX;
 			lastY = e.clientY;
-            const canvas = document.getElementById("window");
+			const canvas = document.getElementById("window");
 			if (canvas) canvas.style.transform = `translate(${x}px, ${y}px)`;
 		}
 	}
 
-    function handleMouseUp() {
-        isDragging = false;
-    }
-
+	function handleMouseUp() {
+		isDragging = false;
+	}
 </script>
 
 <!-- Main container -->
 <div class="flex flex-col justify-center items-center w-full">
+
+	<!-- Hack to pre-load Bevy assets to avoid the tiny delay-->
+	<div class="fixed opacity-0">
+		<img src="assets/blood_1.png" alt="blood1">
+		<img src="assets/blood_2.png" alt="blood1">
+		<img src="assets/bone_1.png" alt="bone1">
+		<img src="assets/bone_2.png" alt="bone2">
+		<img src="assets/bone_3.png" alt="bone3">
+	</div>
+
 	<!-- Window -->
 	<div id="window" class="flex flex-col justify-center items-center mt-40">
 		<!-- Title container -->
 		<button
 			on:mousedown={handleMouseDown}
-            on:mousemove={handleMouseMove}
-            on:mouseup={handleMouseUp}
+			on:mousemove={handleMouseMove}
+			on:mouseup={handleMouseUp}
 			class="cursor-default relative flex flex-row justify-between items-center w-full bg-[#393B3D] border-b border-b-[#000002] border border-[#626264] rounded-xl rounded-b-none"
 		>
 			<!-- macOS dots container -->
@@ -62,13 +82,23 @@
 		</button>
 
 		<!-- Canvas container -->
-		<canvas
-			id="bevy-canvas"
-			on:contextmenu|preventDefault={() => {}}
-			class="shadow-2xl z-10 shadow-black/50 overflow-hidden rounded-xl border border-[#626264] border-t-0 rounded-t-none"
-			height="480"
-			width="640"
-		/>
+		<div class="relative">
+			<canvas
+				id="bevy-canvas"
+				on:contextmenu|preventDefault={() => {}}
+				class="shadow-2xl z-10 shadow-black/50 overflow-hidden rounded-xl border border-[#626264] border-t-0 rounded-t-none"
+				height="480"
+				width="640"
+				style="image-rendering: pixelated;"
+			/>
+			{#if loading}
+				<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 space-x-3 flex flex-row justify-center items-center">
+					<div class="h-2 w-2 bg-[#B6B8B9] animate-pulse" />
+					<div class="h-2 w-2 bg-[#B6B8B9] animate-pulse" />
+					<div class="h-2 w-2 bg-[#B6B8B9] animate-pulse" />
+				</div>
+			{/if}
+		</div>
 	</div>
 
 	<!-- Instructions -->
@@ -76,10 +106,14 @@
 		<img src="images/instructs.svg" alt="Instructions" width="250" />
 	</div>
 
-    <!-- Credits -->
-    <div class="mt-12 text-sm text-[#636669] flex flex-col justify-center items-center space-y-1">
-        <p>Made by <a href="https://www.hugoduprez.com/" target="_blank" class="underline">Hugo</a> with <a href="https://www.rust-lang.org/" target="_blank" class="underline">Rust</a> and <a href="https://kit.svelte.dev/" target="_blank" class="underline">Svelte</a></p>
-        <a href="https://github.com/Hugo-Dz/rust-sandbox" target="_blank" class="underline">How to create games with Rust</a>
-    </div>
-
+	<!-- Credits -->
+	<div class="mt-12 text-sm text-[#636669] flex flex-col justify-center items-center space-y-1">
+		<p>
+			Made by <a href="https://www.hugoduprez.com/" target="_blank" class="underline">Hugo</a> with
+			<a href="https://www.rust-lang.org/" target="_blank" class="underline">Rust</a>
+			and <a href="https://kit.svelte.dev/" target="_blank" class="underline">Svelte</a>
+		</p>
+		<a href="https://github.com/Hugo-Dz/rust-sandbox" target="_blank" class="underline">How to create games with Rust</a
+		>
+	</div>
 </div>