frontend/reader: Show loading indicators

Sometimes images may not load fast enough, resulting in the app being
seemingly stuck displaying the same sets of images. Use a timeout to
detect when images take too long to load and show a spinner instead.

1 files changed, 32 insertions, 3 deletions

diff --git a/frontend/src/lib/reader/ReaderPage.svelte b/frontend/src/lib/reader/ReaderPage.svelte
index fb3e780..c86414d 100644
--- a/frontend/src/lib/reader/ReaderPage.svelte
+++ b/frontend/src/lib/reader/ReaderPage.svelte
@@ -1,19 +1,48 @@
 <script lang="ts">
 	import type { PageFragment } from '$gql/graphql';
+	import Spinner from '$lib/components/Spinner.svelte';
 	import { src } from '$lib/Utils';
+	import { onDestroy } from 'svelte';
 
 	export let page: PageFragment;
+
+	let loading = false;
+	let loadingTimeout: NodeJS.Timeout;
+	let lastId = -1;
+
+	$: page.id, updateLoadingState();
+
+	function updateLoadingState() {
+		if (page.id === lastId) return;
+		lastId = page.id;
+
+		loadingTimeout = setTimeout(() => (loading = true), 150);
+	}
+
+	function finishLoading() {
+		clearTimeout(loadingTimeout);
+		loading = false;
+	}
+
+	onDestroy(() => clearTimeout(loadingTimeout));
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="flex grow" on:click>
+<div class="relative flex grow" on:click>
+	<div class="absolute right-0 top-0 z-0 h-full w-full">
+		{#if loading}
+			<Spinner />
+		{/if}
+	</div>
 	<img
-		class="h-auto w-auto object-contain"
+		class="h-auto w-auto object-contain transition-opacity duration-200"
+		class:opacity-0={loading}
 		width={page.image.width}
 		height={page.image.height}
 		src={src(page.image, 'full')}
-		alt={page.path}
+		alt=""
+		on:load={finishLoading}
 	/>
 </div>