diff options
Diffstat (limited to '')
| -rw-r--r-- | frontend/src/lib/reader/ReaderPage.svelte | 35 |
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> |