frontend/reader: Preload the next set of images

1 files changed, 22 insertions, 0 deletions

diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte
index cc4d10e..59136b4 100644
--- a/frontend/src/lib/reader/PageView.svelte
+++ b/frontend/src/lib/reader/PageView.svelte
@@ -2,6 +2,7 @@
 	import { Direction, Layout, type PageFragment } from '$gql/graphql';
 	import { getReaderContext, partition, type Chunk } from '$lib/Reader';
 	import { binds } from '$lib/Shortcuts';
+	import { src } from '$lib/Utils';
 	import ReaderPage from './ReaderPage.svelte';
 
 	const reader = getReaderContext();
@@ -21,6 +22,22 @@
 		$reader.page = chunks[to].index;
 	}
 
+	function pagesAround(around: number) {
+		const peek = (at: number) => {
+			if (at < 0 || at >= chunks.length) return [];
+
+			const pages = [chunks[at].main];
+
+			if (chunks[at].secondary) {
+				pages.push(chunks[at].secondary);
+			}
+
+			return pages;
+		};
+
+		return [...peek(lookup[around] + 1), ...peek(lookup[around] - 1)];
+	}
+
 	const next = () => gotoChunk(lookup[$reader.page] + 1);
 	const prev = () => gotoChunk(lookup[$reader.page] - 1);
 
@@ -65,3 +82,8 @@
 	<ReaderPage page={secondary} on:click={next} --justify="flex-end" />
 	<ReaderPage page={main} on:click={prev} --justify="flex-start" />
 {/if}
+<div class="invisible absolute">
+	{#each pagesAround($reader.page) as page}
+		<img src={src(page.image, 'full')} alt="" />
+	{/each}
+</div>