fix: paginate the bookmarks and collections lists with Load more
Both lists fetched a single capped page (100 / 200) with no pager, so entries past the cap were silently unreachable. Add a reusable LoadMore component that seeds from the streamed first page (preserving the auth gate + inline error handling) and fetches further offset-based pages on demand, and wire it into the bookmarks and collections pages. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,15 @@
|
||||
<script lang="ts">
|
||||
import CollectionsGrid from '$lib/components/CollectionsGrid.svelte';
|
||||
import MangaGridSkeleton from '$lib/components/MangaGridSkeleton.svelte';
|
||||
import LoadMore from '$lib/components/LoadMore.svelte';
|
||||
import { listMyCollections, type CollectionSummary } from '$lib/api/collections';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
async function fetchMore(offset: number) {
|
||||
const p = await listMyCollections({ limit: data.pageSize, offset });
|
||||
return { items: p.items, total: p.page.total };
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>Collections</h1>
|
||||
@@ -22,7 +29,11 @@
|
||||
<strong>Add to collection</strong> to start one.
|
||||
</p>
|
||||
{:else}
|
||||
<CollectionsGrid collections={r.collections} />
|
||||
<LoadMore initial={r.collections as CollectionSummary[]} total={r.total} {fetchMore}>
|
||||
{#snippet children(items: CollectionSummary[])}
|
||||
<CollectionsGrid collections={items} />
|
||||
{/snippet}
|
||||
</LoadMore>
|
||||
{/if}
|
||||
{/await}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user