feat(#84): Improve performance and efficiency of service worker

src/lib/components/PokemonSprite.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
 	import { PUBLIC_USE_LOCAL_POKEMON_SPRITE_FOLDER } from '$env/static/public';
+	import { inView } from '$lib/actions/inView';
 
 	export let pokemonName: string;
 	export let pokedexNumber: string | number;
 	export let form: string | undefined;
 	export let spriteKey: string | undefined;
 	export let shiny: boolean | undefined = false;
+	export let loadingStrategy: 'eager' | 'lazy' | 'inView' = 'inView';
 
 	let imagePath = null as string | null;
+	let isInView = false;
 
 	function isFemaleForm(value?: string) {
 		return /^female\b/i.test((value ?? '').trim());
@@ -19,7 +22,10 @@
 
 		let formValue = form.trim();
 		formValue = formValue.replace(/^female[-\s]*/i, '');
-		formValue = formValue.replace(/\s*\(.*?\)/g, '').replace(/\s*\[.*?\]/g, '').trim();
+		formValue = formValue
+			.replace(/\s*\(.*?\)/g, '')
+			.replace(/\s*\[.*?\]/g, '')
+			.trim();
 		if (!formValue || formValue.toLowerCase() === 'male') return strippedPokedexNumber;
 
 		formValue = formValue
@@ -40,20 +46,11 @@
 		return formValue ? `${strippedPokedexNumber}-${formValue}` : strippedPokedexNumber;
 	}
 
-	function computeImagePath() {
-		let rootFolder =
+	$: {
+		const rootFolderBase =
 			PUBLIC_USE_LOCAL_POKEMON_SPRITE_FOLDER === 'true'
-				? '/sprites/home'
-				: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home';
-
-		if (shiny) {
-			rootFolder += '/shiny';
-		}
-
-		if (isFemaleForm(form)) {
-			rootFolder += '/female';
-		}
-
+				? '/sprites-small/home'
+				: 'https://raw.githubusercontent.com/jcreek/LivingDexTracker/master/static/sprites-small/home';
 		const resolvedSpriteKey = spriteKey?.trim() || buildFallbackKey();
 		if (!spriteKey?.trim()) {
 			console.warn('Missing sprite key for pokemon entry', {
@@ -63,14 +60,47 @@
 			});
 		}
 
-		return `${rootFolder}/${resolvedSpriteKey}.png`;
+		let rootFolder = rootFolderBase;
+		if (shiny) {
+			rootFolder += '/shiny';
+		}
+		if (isFemaleForm(form)) {
+			rootFolder += '/female';
+		}
+		imagePath = `${rootFolder}/${resolvedSpriteKey}.webp`;
 	}
 
-	$: imagePath = computeImagePath();
+	$: if (loadingStrategy !== 'inView') {
+		isInView = true;
+	}
+
+	function handleInView(inView: boolean) {
+		if (inView) {
+			isInView = true;
+		}
+	}
 </script>
 
 {#if imagePath}
-	<img src={imagePath} alt="sprite" />
+	<span
+		use:inView={{
+			enabled: loadingStrategy === 'inView',
+			once: true,
+			rootMargin: '200px 0px',
+			onChange: handleInView
+		}}
+	>
+		{#if loadingStrategy === 'inView' && !isInView}
+			<span class="loading loading-spinner loading-xs"></span>
+		{:else}
+			<img
+				src={imagePath}
+				alt="sprite"
+				loading={loadingStrategy === 'lazy' ? 'lazy' : 'eager'}
+				decoding="async"
+			/>
+		{/if}
+	</span>
 {:else}
 	<span class="loading loading-spinner loading-xs"></span>
 {/if}