gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 09:19:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add circular loaders to pages

Browse Source
This commit is contained in:
Zerebos
2026-05-16 01:01:12 -04:00
parent 062662781a
commit b1444582a3
1 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/reader/components/PageView.svelte
+33 -9
View File
@@ -376,7 +376,7 @@
{#key chapterEpoch} {#key chapterEpoch}
{#if style === "longstrip"} {#if style === "longstrip"}
{#each flatPages as page, gi} {#each flatPages as page, gi (page.chapterId + ":" + page.localIndex)}
{@const src = resolvedSrc[gi]} {@const src = resolvedSrc[gi]}
{@const isLoaded = loadedSet.has(gi)} {@const isLoaded = loadedSet.has(gi)}
<div <div
@@ -384,9 +384,9 @@
use:observePage={gi} use:observePage={gi}
data-gi={gi} data-gi={gi}
> >
{#if isLoaded} {#if isLoaded && src}
<img <img
src={src ?? ""} src={src}
alt="{page.chapterName} – Page {page.localIndex + 1}" alt="{page.chapterName} – Page {page.localIndex + 1}"
data-local-page={page.localIndex + 1} data-local-page={page.localIndex + 1}
data-chapter={page.chapterId} data-chapter={page.chapterId}
@@ -404,7 +404,9 @@
}} }}
/> />
{:else} {:else}
<div class="strip-placeholder"></div> <div class="strip-placeholder page-loader" aria-hidden="true">
<CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" />
</div>
{/if} {/if}
</div> </div>
{/each} {/each}
@@ -413,7 +415,9 @@
{:else if style === "fade" && pageReady} {:else if style === "fade" && pageReady}
<div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)"> <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
{#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)} {#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)}
<img src="" alt="Page {store.pageNumber}" class={imgCls} decoding="async" style="opacity:0" draggable="false" /> <div class="page-loader page-loader-single" aria-hidden="true">
<CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" />
</div>
{:then src} {:then src}
<img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" style="opacity: {fadingOut ? 0 : 1}; transition: opacity 0.1s ease;" draggable="false" /> <img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" style="opacity: {fadingOut ? 0 : 1}; transition: opacity 0.1s ease;" draggable="false" />
{/await} {/await}
@@ -423,9 +427,11 @@
<div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)"> <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
{#if pageGroups.length} {#if pageGroups.length}
<div class="double-wrap"> <div class="double-wrap">
{#each currentGroup as pg, i} {#each currentGroup as pg, i (pg)}
{#await resolveUrl(store.pageUrls[pg - 1], 999)} {#await resolveUrl(store.pageUrls[pg - 1], 999)}
<img src="" alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" draggable="false" /> <div class="page-loader page-half {i === 0 ? 'gap-left' : 'gap-right'}" aria-hidden="true">
<CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" />
</div>
{:then src} {:then src}
<img {src} alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" draggable="false" /> <img {src} alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" draggable="false" />
{/await} {/await}
@@ -439,7 +445,9 @@
{:else if pageReady} {:else if pageReady}
<div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)"> <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
{#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)} {#await resolveUrl(store.pageUrls[store.pageNumber - 1], 999)}
<img src="" alt="Page {store.pageNumber}" class={imgCls} decoding="async" draggable="false" /> <div class="page-loader page-loader-single" aria-hidden="true">
<CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" />
</div>
{:then src} {:then src}
<img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" draggable="false" /> <img {src} alt="Page {store.pageNumber}" class={imgCls} decoding="async" draggable="false" />
{/await} {/await}
@@ -471,7 +479,23 @@
width: var(--effective-width, 100%); width: var(--effective-width, 100%);
max-width: var(--effective-width, 100%); max-width: var(--effective-width, 100%);
aspect-ratio: var(--aspect, 0.667); aspect-ratio: var(--aspect, 0.667);
background: transparent; border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
}
.page-loader {
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
border-radius: var(--radius-sm);
}
.page-loader-single {
width: min(100%, var(--effective-width, 100%));
max-width: var(--effective-width, 100%);
max-height: calc(100vh - 80px);
aspect-ratio: 2 / 3;
} }
.img { display: block; user-select: none; image-rendering: auto; } .img { display: block; user-select: none; image-rendering: auto; }