diff options
Diffstat (limited to 'frontend/src/lib/reader/ReaderPage.svelte')
| -rw-r--r-- | frontend/src/lib/reader/ReaderPage.svelte | 43 |
1 files changed, 10 insertions, 33 deletions
diff --git a/frontend/src/lib/reader/ReaderPage.svelte b/frontend/src/lib/reader/ReaderPage.svelte index c86414d..4a19c6e 100644 --- a/frontend/src/lib/reader/ReaderPage.svelte +++ b/frontend/src/lib/reader/ReaderPage.svelte @@ -1,48 +1,25 @@ <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'; + import type { MouseEventHandler } from 'svelte/elements'; - 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; + interface Props { + page: PageFragment; + onclick: MouseEventHandler<HTMLDivElement>; } - onDestroy(() => clearTimeout(loadingTimeout)); + let { page, onclick }: Props = $props(); </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> +<!-- svelte-ignore a11y_click_events_have_key_events --> +<!-- svelte-ignore a11y_no_static_element_interactions --> +<div class="flex w-full" {onclick}> <img - class="h-auto w-auto object-contain transition-opacity duration-200" - class:opacity-0={loading} + class="h-auto w-auto object-contain" width={page.image.width} height={page.image.height} src={src(page.image, 'full')} - alt="" - on:load={finishLoading} + alt={page.path} /> </div> |