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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user