feat: loading skeletons on the bookmarks and collections pages

Both loaders now stream the whole result (the single fetch is also the auth
gate) so the page shows a skeleton while it loads instead of the global nav
bar only: a ListRowSkeleton on bookmarks and a MangaGridSkeleton on the
collections grid, resolving to the sign-in / error / empty / list branches.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-07 07:18:43 +02:00
parent 5b51bcf056
commit 16cdec051a
10 changed files with 212 additions and 63 deletions

View File

@@ -1,27 +1,29 @@
<script lang="ts">
import BookmarkList from '$lib/components/BookmarkList.svelte';
import ListRowSkeleton from '$lib/components/ListRowSkeleton.svelte';
let { data } = $props();
const authenticated = $derived(data.authenticated);
const bookmarks = $derived(data.bookmarks);
const error = $derived(data.error);
</script>
<h1>Bookmarks</h1>
{#if error}
<p class="error" role="alert" data-testid="bookmarks-error">
Couldn't load bookmarks: {error}
</p>
{:else if !authenticated}
<p class="hint" data-testid="bookmarks-signin">
<a href="/login">Sign in</a> to see your bookmarks.
</p>
{:else if bookmarks.length === 0}
<p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
{:else}
<BookmarkList {bookmarks} />
{/if}
{#await data.result}
<ListRowSkeleton />
{:then r}
{#if r.error}
<p class="error" role="alert" data-testid="bookmarks-error">
Couldn't load bookmarks: {r.error}
</p>
{:else if !r.authenticated}
<p class="hint" data-testid="bookmarks-signin">
<a href="/login">Sign in</a> to see your bookmarks.
</p>
{:else if r.bookmarks.length === 0}
<p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
{:else}
<BookmarkList bookmarks={r.bookmarks} />
{/if}
{/await}
<style>
.error {