summaryrefslogblamecommitdiffstatshomepage
path: root/frontend/src/lib/reader/ReaderPage.svelte
blob: c86414da0d305ff76fef4b778e88041599de9954 (plain) (tree)
1
2
3
4
5
6
7

                                                         
                                                             
                                         
                                           

                                      



















                                                                         



                                                          





                                                              
            

                                                                                    


                                             

                                       







                                                
<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="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 transition-opacity duration-200"
		class:opacity-0={loading}
		width={page.image.width}
		height={page.image.height}
		src={src(page.image, 'full')}
		alt=""
		on:load={finishLoading}
	/>
</div>

<style>
	div {
		justify-content: var(--justify);
	}
</style>