diff options
| author | Wolfgang Müller | 2025-01-25 18:57:33 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2025-01-25 18:59:42 +0100 |
| commit | cf817a050a82b526ad230d2677f23f2efd7f3455 (patch) | |
| tree | ba7d8af2292b9bdaa8b5aebe43dc4360bab50117 | |
| parent | 0fcc91123cd04bd4ca596a1222eab5eaeeefd7b1 (diff) | |
| download | hircine-cf817a050a82b526ad230d2677f23f2efd7f3455.tar.gz | |
frontend/reader: Revert "Show loading indicators"
This reverts commit d297c6310a6a4db8dd7cc3efe6ff59620deadcc0. It seems
that on slower systems it's actually better without this.
| -rw-r--r-- | frontend/src/lib/reader/Reader.svelte | 2 | ||||
| -rw-r--r-- | frontend/src/lib/reader/ReaderPage.svelte | 35 |
2 files changed, 4 insertions, 33 deletions
diff --git a/frontend/src/lib/reader/Reader.svelte b/frontend/src/lib/reader/Reader.svelte index 15ebdf4..9bc7a82 100644 --- a/frontend/src/lib/reader/Reader.svelte +++ b/frontend/src/lib/reader/Reader.svelte @@ -25,7 +25,7 @@ </aside> {/if} <main class="relative flex grow"> - <div class="absolute z-10 flex w-full p-1 text-lg [&>*:last-child]:ml-auto"> + <div class="absolute flex w-full p-1 text-lg [&>*:last-child]:ml-auto"> {#if $$slots.sidebar} <ReaderMenuButton /> {/if} diff --git a/frontend/src/lib/reader/ReaderPage.svelte b/frontend/src/lib/reader/ReaderPage.svelte index c86414d..fb3e780 100644 --- a/frontend/src/lib/reader/ReaderPage.svelte +++ b/frontend/src/lib/reader/ReaderPage.svelte @@ -1,48 +1,19 @@ <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> +<div class="flex grow" on:click> <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> |