Reserve image space and use native lazy load

src/ui/PodcastView/EpisodeListItem.svelte

@@ -38,6 +38,8 @@
 				src={episode.artworkUrl}
 				alt={episode.title}
 				fadeIn={true}
+				width="5rem"
+				height="5rem"
 				class="podcast-episode-thumbnail"
 			/>
 		</div>

src/ui/common/Image.svelte

@@ -6,11 +6,12 @@
 	export let fadeIn: boolean = false;
 	export let opacity: number = 0; // Falsey value so condition isn't triggered if not set.
 	export let interactive: boolean = false;
+	export let loading: "lazy" | "eager" | null | undefined = undefined;
 	export {_class as class};
 	let _class = "";
 
 	let loaded = false;
-	let loading = true;
+	let isLoading = true;
 	let failed = false;
 
 	const dispatcher = createEventDispatcher();
@@ -20,7 +21,7 @@
 	}
 </script>
 
-{#if loading || loaded}
+{#if isLoading || loaded}
 	{#if interactive}
 		<button
 			type="button"
@@ -31,11 +32,12 @@
 				draggable="false"
 				{src} 
 				{alt} 
+				{loading}
 				class={_class}
 				style:opacity={opacity ? opacity : !fadeIn ? 1 : loaded ? 1 : 0}
 				style:transition={fadeIn ? "opacity 0.5s ease-out" : ""}
-				on:load={() => {loaded = true; loading = false;}}
-				on:error={() => {failed = true; loading = false;}}
+				on:load={() => {loaded = true; isLoading = false;}}
+				on:error={() => {failed = true; isLoading = false;}}
 			/>
 		</button>
 	{:else}
@@ -44,11 +46,12 @@
 				draggable="false"
 				{src} 
 				{alt} 
+				{loading}
 				class={_class}
 				style:opacity={opacity ? opacity : !fadeIn ? 1 : loaded ? 1 : 0}
 				style:transition={fadeIn ? "opacity 0.5s ease-out" : ""}
-				on:load={() => {loaded = true; loading = false;}}
-				on:error={() => {failed = true; loading = false;}}
+				on:load={() => {loaded = true; isLoading = false;}}
+				on:error={() => {failed = true; isLoading = false;}}
 			/>
 		</div>
 	{/if}

src/ui/common/ImageLoader.svelte

@@ -4,26 +4,46 @@
 	export let alt: string;
 	export let fadeIn: boolean = false;
 	export let interactive: boolean = false;
+	export let width: string | number | undefined;
+	export let height: string | number | undefined;
+	export let aspectRatio: string | undefined = "1 / 1";
 	export { _class as class };
 
 	let _class: string = "";
 
-	import IntersectionObserver from "./IntersectionObserver.svelte";
 	import Image from "./Image.svelte";
 	import { createEventDispatcher } from "svelte";
 
 	const dispatcher = createEventDispatcher();
+
+	const toDimension = (value?: string | number) =>
+		typeof value === "number" ? `${value}px` : value;
+
+	$: resolvedWidth = toDimension(width);
+	$: resolvedHeight = toDimension(height);
+	$: resolvedAspectRatio = resolvedHeight ? undefined : aspectRatio;
 </script>
 
-<IntersectionObserver once={true} let:intersecting>
-	{#if intersecting}
-		<Image
-			{alt} 
-			{src} 
-			{fadeIn}
-			{interactive}
-			on:click={event => dispatcher('click', { event })} 
-			class={_class}
-		/>
-	{/if}
-</IntersectionObserver>
+<div
+	class="image-loader"
+	style:width={resolvedWidth}
+	style:height={resolvedHeight}
+	style:aspect-ratio={resolvedAspectRatio}
+>
+	<Image
+		{alt} 
+		{src} 
+		{fadeIn}
+		{interactive}
+		loading="lazy"
+		on:click={event => dispatcher('click', { event })} 
+		class={_class}
+	/>
+</div>
+
+<style>
+	.image-loader {
+		position: relative;
+		width: 100%;
+	}
+</style>