From c3fcef9a8111650a307ee22bc7cc190037c4dd68 Mon Sep 17 00:00:00 2001
From: David Bushell <david@dbushell.com>
Date: Mon, 9 Mar 2026 14:05:13 +0000
Subject: [PATCH] async lazy load bookmark pagination

---
 src/lib/types.ts                            |  8 ++++
 src/routes/bookmarks/[did=did]/+page.svelte | 48 ++++++++++++++++++++-
 src/routes/bookmarks/[did=did]/+page.ts     | 42 +++++++++++-------
 3 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/src/lib/types.ts b/src/lib/types.ts
index 271c6c2..8025310 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,4 +1,5 @@
 import type { RequestEvent } from "@sveltejs/kit";
+import type { BookmarkData } from "./valibot";
 
 export type AuthEvent = RequestEvent & {
   platform: App.Platform;
@@ -10,6 +11,13 @@ export type UserEvent = AuthEvent & {
   };
 };
 
+export type BookmarkEntity = BookmarkData & { cid: string; uri: string };
+
+export type BookmarkLoad = (cursor?: string) => Promise<{
+  bookmarks: Array<BookmarkEntity>;
+  next?: BookmarkLoad;
+}>;
+
 export const isAuthEvent = (event: RequestEvent): event is AuthEvent => {
   return event.platform?.env !== undefined;
 };
diff --git a/src/routes/bookmarks/[did=did]/+page.svelte b/src/routes/bookmarks/[did=did]/+page.svelte
index 24bcfed..75d41ed 100644
--- a/src/routes/bookmarks/[did=did]/+page.svelte
+++ b/src/routes/bookmarks/[did=did]/+page.svelte
@@ -1,12 +1,46 @@
 <script lang="ts">
   import { closeDialog, openDialog } from "$lib/dialog.svelte.js";
+  import type { BookmarkEntity, BookmarkLoad } from "$lib/types";
+  import { onMount } from "svelte";
+  import type { Attachment } from "svelte/attachments";
   import type { EventHandler } from "svelte/elements";
   import type { PageProps } from "./$types";
   let { data, form, params }: PageProps = $props();
 
+  let bookmarks: BookmarkEntity[] = $derived(data.bookmarks);
+  let nextLoad: BookmarkLoad | undefined = $derived(data.next);
+  let nextObserver: IntersectionObserver | undefined = $state(undefined);
+  let nextDisabled = $state(true);
+
+  const nextAttach: Attachment = (element) => {
+    nextObserver?.observe(element);
+  };
+
+  const onNextClick = () => {
+    if (nextLoad === undefined) return;
+    nextLoad().then(async (newData) => {
+      bookmarks = bookmarks.concat(newData.bookmarks);
+      nextLoad = newData.next;
+    });
+    nextLoad = undefined;
+  };
+
+  onMount(() => {
+    nextDisabled = false;
+    nextObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          nextObserver?.unobserve(entry.target);
+          requestAnimationFrame(() => onNextClick());
+          break;
+        }
+      }
+    });
+  });
+
   const isSelf = $derived(data.user && params.did === data.user.did);
 
-  let editData: null | (typeof data.bookmarks)[number] = $state(null);
+  let editData: BookmarkEntity | null = $state(null);
   let editDialog: HTMLDialogElement | null = $state(null);
   let createDialog: HTMLDialogElement | null = $state(null);
   let createURL: URL | null = $state(null);
@@ -198,7 +232,7 @@
       </button>
     {/if}
   </div>
-  {#each data.bookmarks as entry (entry.cid)}
+  {#each bookmarks as entry (entry.cid)}
     <article id={entry.cid} class="Bookmark">
       <h3>
         <a href={entry.url} rel="noopener noreferrer" target="_blank">
@@ -235,4 +269,14 @@
       {/if}
     </article>
   {/each}
+  {#if nextLoad}
+    <button
+      type="button"
+      onclick={onNextClick}
+      disabled={nextDisabled}
+      {@attach nextAttach}
+    >
+      Load more...
+    </button>
+  {/if}
 </div>
diff --git a/src/routes/bookmarks/[did=did]/+page.ts b/src/routes/bookmarks/[did=did]/+page.ts
index 7490e6e..f548d25 100644
--- a/src/routes/bookmarks/[did=did]/+page.ts
+++ b/src/routes/bookmarks/[did=did]/+page.ts
@@ -1,6 +1,8 @@
+import { dev } from "$app/environment";
 import { resolvePDS } from "$lib/atproto";
+import type { BookmarkEntity, BookmarkLoad } from "$lib/types";
 import {
-  type BookmarkData,
+  type ActorProfileData,
   parseActorProfile,
   parseBookmark,
 } from "$lib/valibot";
@@ -8,6 +10,8 @@ import { Client, simpleFetchHandler } from "@atcute/client";
 import { error } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";
 
+const RECORD_LIMIT = dev ? 5 : 50;
+
 export const load: PageLoad = async ({ params, data, fetch }) => {
   const pds = await resolvePDS(params.did);
   if (pds === null) {
@@ -26,21 +30,29 @@ export const load: PageLoad = async ({ params, data, fetch }) => {
   if (response.ok === false) {
     error(404);
   }
-  const bookmarks: Array<BookmarkData & { cid: string; uri: string }> = [];
-  // [TODO] pagination?
-  let cursor: string | undefined;
-  do {
+  let profile: ActorProfileData;
+  try {
+    profile = parseActorProfile(response.data.value);
+  } catch {
+    error(404);
+  }
+  // First set can be loaded server-side
+  // Pagination is done client-side for older records
+  const loadBookmarks: BookmarkLoad = async (cursor) => {
     const response = await rpc.get("com.atproto.repo.listRecords", {
       params: {
         repo: params.did,
         collection: "social.attic.bookmark.entity",
+        limit: RECORD_LIMIT,
         cursor,
       },
     });
     if (response.ok === false) {
-      break;
+      return {
+        bookmarks: [],
+      };
     }
-    cursor = response.data.cursor;
+    const bookmarks: Array<BookmarkEntity> = [];
     for (const entity of response.data.records) {
       try {
         bookmarks.push({
@@ -52,15 +64,15 @@ export const load: PageLoad = async ({ params, data, fetch }) => {
         // [TODO] delete invalid data?
       }
     }
-  } while (cursor);
-  try {
-    const profile = parseActorProfile(response.data.value);
+    const next = response.data.cursor;
     return {
-      ...data,
-      profile,
       bookmarks,
+      next: next ? () => loadBookmarks(next) : undefined,
     };
-  } catch {
-    error(404);
-  }
+  };
+  return {
+    ...data,
+    profile,
+    ...await loadBookmarks(),
+  };
 };
-- 
2.51.2