perf: task-fix-list-virtualization changes

increase profile timer and chat search throttle delays
reduce GC pressure in derived stores
use requestIdleCallback for non-critical storage writes
batch repository update processing in feeds

.gitignore

@@ -70,6 +70,7 @@ GoogleService-Info.plist
 .roo
 .idea/
 .vscode/
+.claude/
 
 # OS generated
 .DS_Store

package.json

@@ -59,7 +59,7 @@
     "@getalby/lightning-tools": "^6.1.0",
     "@getalby/sdk": "^5.1.2",
     "@noble/curves": "^1.9.7",
-    "@pomade/core": "^0.2.2",
+    "@pomade/core": "^0.2.3",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
@@ -101,9 +101,9 @@
     "onlyBuiltDependencies": [
       "sharp",
       "nostr-signer-capacitor-plugin"
-    ],
-    "overrides": {
-      "sharp": "0.35.0-rc.0"
-    }
+    ]
+  },
+  "overrides": {
+    "sharp": "0.35.0-rc.0"
   }
 }

pnpm-lock.yaml

@@ -60,8 +60,8 @@ importers:
         specifier: ^1.9.7
         version: 1.9.7
       '@pomade/core':
-        specifier: ^0.2.2
-        version: 0.2.2(@frostr/bifrost@1.0.7(typescript@5.9.3))(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/signer@0.8.12(@noble/curves@1.9.7)(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-signer-capacitor-plugin@https://codeload.github.com/coracle-social/nostr-signer-capacitor-plugin/tar.gz/be4bb90a1a15c8eec0934f2f66ce9e82ecc72d51(@capacitor/core@8.0.1))(nostr-tools@2.20.0(typescript@5.9.3)))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-tools@2.20.0(typescript@5.9.3))
+        specifier: ^0.2.3
+        version: 0.2.3(@frostr/bifrost@1.0.7(typescript@5.9.3))(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/signer@0.8.12(@noble/curves@1.9.7)(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-signer-capacitor-plugin@https://codeload.github.com/coracle-social/nostr-signer-capacitor-plugin/tar.gz/be4bb90a1a15c8eec0934f2f66ce9e82ecc72d51(@capacitor/core@8.0.1))(nostr-tools@2.20.0(typescript@5.9.3)))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-tools@2.20.0(typescript@5.9.3))
       '@poppanator/sveltekit-svg':
         specifier: ^4.2.1
         version: 4.2.1(rollup@2.80.0)(svelte@5.48.0)(svgo@3.3.2)(vite@5.4.21(@types/node@25.0.10)(lightningcss@1.32.0)(terser@5.46.0))
@@ -85,7 +85,7 @@ importers:
         version: 0.6.8(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.48.0)(vite@5.4.21(@types/node@25.0.10)(lightningcss@1.32.0)(terser@5.46.0)))(svelte@5.48.0)(typescript@5.9.3)(vite@5.4.21(@types/node@25.0.10)(lightningcss@1.32.0)(terser@5.46.0)))(@vite-pwa/assets-generator@0.2.6)(vite-plugin-pwa@0.21.2(@vite-pwa/assets-generator@0.2.6)(vite@5.4.21(@types/node@25.0.10)(lightningcss@1.32.0)(terser@5.46.0))(workbox-build@7.3.0)(workbox-window@7.3.0))
       '@welshman/app':
         specifier: ^0.8.12
-        version: 0.8.12(3074ef6691f94dc03952d8dbc98013a7)
+        version: 0.8.12(2f5bd20a84c8c39e26176b5a5db083ae)
       '@welshman/content':
         specifier: ^0.8.12
         version: 0.8.12(nostr-tools@2.20.0(typescript@5.9.3))
@@ -1427,9 +1427,9 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@pomade/core@0.2.2':
-    resolution: {integrity: sha512-FoilLsO0gVjiKMW3LV63pmXU7x3gh8YVGVulyR6QJr4h47XrsBg8vPkZtKWr4+sH3sW31e2tNIPUb3ptiuhrMA==}
-    version: 0.2.2
+  '@pomade/core@0.2.3':
+    resolution: {integrity: sha512-36+abWfMH1Mif9FjBO7xICCkGZE4IqQpy7Csxlauyt0bhYQ9GsB07LqK5Qm3GgEHNwF9rFXdSZawkM+E6BeIfg==}
+    version: 0.2.3
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@frostr/bifrost': ^1.0.7
@@ -6610,7 +6610,7 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@pomade/core@0.2.2(@frostr/bifrost@1.0.7(typescript@5.9.3))(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/signer@0.8.12(@noble/curves@1.9.7)(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-signer-capacitor-plugin@https://codeload.github.com/coracle-social/nostr-signer-capacitor-plugin/tar.gz/be4bb90a1a15c8eec0934f2f66ce9e82ecc72d51(@capacitor/core@8.0.1))(nostr-tools@2.20.0(typescript@5.9.3)))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-tools@2.20.0(typescript@5.9.3))':
+  '@pomade/core@0.2.3(@frostr/bifrost@1.0.7(typescript@5.9.3))(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/signer@0.8.12(@noble/curves@1.9.7)(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-signer-capacitor-plugin@https://codeload.github.com/coracle-social/nostr-signer-capacitor-plugin/tar.gz/be4bb90a1a15c8eec0934f2f66ce9e82ecc72d51(@capacitor/core@8.0.1))(nostr-tools@2.20.0(typescript@5.9.3)))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-tools@2.20.0(typescript@5.9.3))':
     dependencies:
       '@frostr/bifrost': 1.0.7(typescript@5.9.3)
       '@noble/hashes': 2.0.1
@@ -7276,9 +7276,9 @@ snapshots:
     optionalDependencies:
       '@vite-pwa/assets-generator': 0.2.6
 
-  '@welshman/app@0.8.12(3074ef6691f94dc03952d8dbc98013a7)':
+  '@welshman/app@0.8.12(2f5bd20a84c8c39e26176b5a5db083ae)':
     dependencies:
-      '@pomade/core': 0.2.2(@frostr/bifrost@1.0.7(typescript@5.9.3))(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/signer@0.8.12(@noble/curves@1.9.7)(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-signer-capacitor-plugin@https://codeload.github.com/coracle-social/nostr-signer-capacitor-plugin/tar.gz/be4bb90a1a15c8eec0934f2f66ce9e82ecc72d51(@capacitor/core@8.0.1))(nostr-tools@2.20.0(typescript@5.9.3)))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-tools@2.20.0(typescript@5.9.3))
+      '@pomade/core': 0.2.3(@frostr/bifrost@1.0.7(typescript@5.9.3))(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/signer@0.8.12(@noble/curves@1.9.7)(@noble/hashes@2.0.1)(@welshman/lib@0.8.12)(@welshman/net@0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-signer-capacitor-plugin@https://codeload.github.com/coracle-social/nostr-signer-capacitor-plugin/tar.gz/be4bb90a1a15c8eec0934f2f66ce9e82ecc72d51(@capacitor/core@8.0.1))(nostr-tools@2.20.0(typescript@5.9.3)))(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(nostr-tools@2.20.0(typescript@5.9.3))
       '@welshman/feeds': 0.8.12(d5b74f0c83250e052e0b96f7ff5804e8)
       '@welshman/lib': 0.8.12
       '@welshman/net': 0.8.12(@welshman/lib@0.8.12)(@welshman/util@0.8.12(@noble/curves@1.9.7)(@welshman/lib@0.8.12)(nostr-tools@2.20.0(typescript@5.9.3)))(ws@8.18.3)

src/app.css

@@ -425,7 +425,7 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */
 
 .chat__compose {
-  @apply relative z-compose mb-14 shrink-0 md:mb-0;
+  @apply z-compose relative mb-14 shrink-0 md:mb-0;
 }
 
 .chat__compose .chat__compose-inner {

src/app/components/RoomItemContent.svelte

@@ -8,16 +8,22 @@
   import {getRoomItemPath} from "@app/util/routes"
 
   const props: ComponentProps<typeof NoteContent> = $props()
+  const MESSAGE_MIN_LENGTH = 5000
+  const MESSAGE_MAX_LENGTH = 5500
 
   const path = getRoomItemPath(props.url!, props.event)
+  const minLength =
+    props.minLength ?? (props.event.kind === MESSAGE ? MESSAGE_MIN_LENGTH : undefined)
+  const maxLength =
+    props.maxLength ?? (props.event.kind === MESSAGE ? MESSAGE_MAX_LENGTH : undefined)
 </script>
 
 <div class={cx("text-sm", {"card2 card2-sm bg-alt": props.event.kind !== MESSAGE})}>
   {#if path && !isMobile}
     <Link href={path}>
-      <NoteContent {...props} />
+      <NoteContent {...props} {minLength} {maxLength} />
     </Link>
   {:else}
-    <NoteContent {...props} />
+    <NoteContent {...props} {minLength} {maxLength} />
   {/if}
 </div>

src/app/core/requests.ts

@@ -1,5 +1,6 @@
-import {get, writable} from "svelte/store"
+import {writable} from "svelte/store"
 import {
+  batch,
   call,
   uniq,
   int,
@@ -25,7 +26,8 @@ import {
   sortEventsDesc,
 } from "@welshman/util"
 import type {TrustedEvent, Filter, List} from "@welshman/util"
-import {load, request} from "@welshman/net"
+import {load, request, mergeRepositoryUpdates} from "@welshman/net"
+import type {RepositoryUpdate} from "@welshman/net"
 import {repository, loadRelay, tracker} from "@welshman/app"
 import {createScroller} from "@lib/html"
 import {daysBetween} from "@lib/util"
@@ -56,57 +58,75 @@ export const makeFeed = ({
   let backwardWindow = [at - interval, at]
   let forwardWindow = [at, at + interval]
 
-  const insertEvent = (event: TrustedEvent) => {
-    let handled = false
+  const insertIntoBuffer = (event: TrustedEvent) => {
+    for (let i = 0; i < buffer.length; i++) {
+      if (buffer[i].created_at > event.created_at) {
+        buffer.splice(i, 0, event)
+        return
+      }
+    }
+    buffer.push(event)
+  }
 
-    if (between([backwardWindow[0], forwardWindow[1]], event.created_at)) {
-      const $events = get(events)
+  // Batch-insert events into the visible store with a single update
+  const insertEvents = (newEvents: TrustedEvent[]) => {
+    const visible: TrustedEvent[] = []
 
-      for (let i = 0; i < $events.length; i++) {
-        if ($events[i].created_at > event.created_at) {
-          events.set(insertAt(i, event, $events))
-          handled = true
-          break
+    for (const event of newEvents) {
+      if (between([backwardWindow[0], forwardWindow[1]], event.created_at)) {
+        visible.push(event)
+      } else {
+        insertIntoBuffer(event)
+      }
+    }
+
+    if (visible.length > 0) {
+      events.update($events => {
+        for (const event of visible) {
+          let inserted = false
+          for (let i = 0; i < $events.length; i++) {
+            if ($events[i].created_at > event.created_at) {
+              $events = insertAt(i, event, $events)
+              inserted = true
+              break
+            }
+          }
+          if (!inserted) {
+            $events = [...$events, event]
+          }
         }
-      }
-
-      if (!handled) {
-        events.set([...$events, event])
-      }
-    } else {
-      for (let i = 0; i < buffer.length; i++) {
-        if (buffer[i].created_at > event.created_at) {
-          buffer.splice(i, 0, event)
-          handled = true
-          break
-        }
-      }
-
-      if (!handled) {
-        buffer.push(event)
-      }
+        return $events
+      })
     }
   }
 
   const unsubscribers = [
-    on(repository, "update", ({added, removed}) => {
-      if (removed.size > 0) {
-        buffer = buffer.filter(e => !removed.has(e.id))
-        events.update($events => $events.filter(e => !removed.has(e.id)))
-      }
+    on(
+      repository,
+      "update",
+      batch(150, (updates: RepositoryUpdate[]) => {
+        const {added, removed} = mergeRepositoryUpdates(updates)
 
-      for (const event of added) {
-        if (matchFilters(filters, event) && tracker.getRelays(event.id).has(url)) {
-          insertEvent(event)
+        if (removed.size > 0) {
+          buffer = buffer.filter(e => !removed.has(e.id))
+          events.update($events => $events.filter(e => !removed.has(e.id)))
         }
-      }
-    }),
+
+        const matching = added.filter(
+          event => matchFilters(filters, event) && tracker.getRelays(event.id).has(url),
+        )
+
+        if (matching.length > 0) {
+          insertEvents(matching)
+        }
+      }),
+    ),
     on(tracker, "add", (id: string, trackerUrl: string) => {
       if (trackerUrl === url) {
         const event = repository.getEvent(id)
 
         if (event && matchFilters(filters, event)) {
-          insertEvent(event)
+          insertEvents([event])
         }
       }
     }),
@@ -137,9 +157,7 @@ export const makeFeed = ({
 
       backwardWindow = [since - interval, since]
 
-      for (const event of buffer.splice(0, 30)) {
-        insertEvent(event)
-      }
+      insertEvents(buffer.splice(0, 30))
 
       if (until > now() - int(2, YEAR)) {
         loadTimeframe(since, until)
@@ -160,9 +178,7 @@ export const makeFeed = ({
 
       forwardWindow = [until, until + interval]
 
-      for (const event of buffer.splice(0, 30)) {
-        insertEvent(event)
-      }
+      insertEvents(buffer.splice(0, 30))
 
       if (until < now()) {
         loadTimeframe(since, until)
@@ -208,40 +224,61 @@ export const makeCalendarFeed = ({
 
   const events = writable(sortBy(getStart, getEventsForUrl(url, filters)))
 
-  const insertEvent = (event: TrustedEvent) => {
-    const start = getStart(event)
-    const address = getAddress(event)
-
-    if (isNaN(start) || isNaN(getEnd(event))) return
+  // Batch-insert calendar events into the store with a single update
+  const insertEvents = (newEvents: TrustedEvent[]) => {
+    const valid = newEvents.filter(e => !isNaN(getStart(e)) && !isNaN(getEnd(e)))
+    if (valid.length === 0) return
 
     events.update($events => {
-      for (let i = 0; i < $events.length; i++) {
-        if ($events[i].id === event.id) return $events
-        if (getStart($events[i]) > start) return insertAt(i, event, $events)
-      }
+      for (const event of valid) {
+        const start = getStart(event)
+        const address = getAddress(event)
 
-      return [...$events.filter(e => getAddress(e) !== address), event]
+        let handled = false
+        for (let i = 0; i < $events.length; i++) {
+          if ($events[i].id === event.id) {
+            handled = true
+            break
+          }
+          if (getStart($events[i]) > start) {
+            $events = insertAt(i, event, $events)
+            handled = true
+            break
+          }
+        }
+
+        if (!handled) {
+          $events = [...$events.filter(e => getAddress(e) !== address), event]
+        }
+      }
+      return $events
     })
   }
 
   const unsubscribers = [
-    on(repository, "update", ({added, removed}) => {
-      if (removed.size > 0) {
-        events.update($events => $events.filter(e => !removed.has(e.id)))
-      }
+    on(
+      repository,
+      "update",
+      batch(150, (updates: RepositoryUpdate[]) => {
+        const {added, removed} = mergeRepositoryUpdates(updates)
 
-      for (const event of added) {
-        if (matchFilters(filters, event)) {
-          insertEvent(event)
+        if (removed.size > 0) {
+          events.update($events => $events.filter(e => !removed.has(e.id)))
         }
-      }
-    }),
+
+        const matching = added.filter(event => matchFilters(filters, event))
+
+        if (matching.length > 0) {
+          insertEvents(matching)
+        }
+      }),
+    ),
     on(tracker, "add", (id: string, trackerUrl: string) => {
       if (trackerUrl === url) {
         const event = repository.getEvent(id)
 
         if (event && matchFilters(filters, event)) {
-          insertEvent(event)
+          insertEvents([event])
         }
       }
     }),

src/app/core/state.ts

@@ -554,7 +554,7 @@ export const chatsById = call(() => {
         setTimeout(() => {
           addEvents(added)
           removeEvents(removed)
-        }, 50)
+        }, 200)
       }),
     ]
 
@@ -568,7 +568,7 @@ export const deriveChat = call(() => {
   return (pubkeys: string[]) => _deriveChat(makeChatId(pubkeys))
 })
 
-export const chatSearch = derived(throttled(800, chatsById), $chatsByPubkey => {
+export const chatSearch = derived(throttled(1500, chatsById), $chatsByPubkey => {
   return createSearch(
     sortBy(c => -c.last_activity, Array.from($chatsByPubkey.values())),
     {
@@ -607,7 +607,7 @@ export const roomMetaEventsByIdByUrl = deriveEventsByIdByUrl({
 })
 
 export const roomsByUrl = derived(roomMetaEventsByIdByUrl, roomMetaEventsByIdByUrl => {
-  const metaByIdByUrl = new Map<string, Map<string, Room>>()
+  const result = new Map<string, Room[]>()
 
   for (const [url, events] of roomMetaEventsByIdByUrl.entries()) {
     const [metaEvents, deleteEvents] = partition(spec({kind: ROOM_META}), events.values())
@@ -619,6 +619,8 @@ export const roomsByUrl = derived(roomMetaEventsByIdByUrl, roomMetaEventsByIdByU
       }
     }
 
+    const metaById = new Map<string, Room>()
+
     for (const event of metaEvents) {
       const meta = tryCatch(() => readRoomMeta(event))
 
@@ -626,22 +628,14 @@ export const roomsByUrl = derived(roomMetaEventsByIdByUrl, roomMetaEventsByIdByU
         continue
       }
 
-      let metaById = metaByIdByUrl.get(url)
-      if (!metaById) {
-        metaById = new Map()
-        metaByIdByUrl.set(url, metaById)
-      }
-
       const id = makeRoomId(url, meta.h)
 
       metaById.set(id, {...meta, url, id})
     }
-  }
 
-  const result = new Map<string, Room[]>()
-
-  for (const [url, metaById] of metaByIdByUrl.entries()) {
-    result.set(url, Array.from(metaById.values()))
+    if (metaById.size > 0) {
+      result.set(url, Array.from(metaById.values()))
+    }
   }
 
   return result
@@ -949,18 +943,33 @@ export const deriveSpaceActionItems = (url: string) =>
       for (const [h, roomEvents] of groupBy(getRoomId, $events)) {
         if (!h) continue
 
-        const roomJoins = roomEvents.filter(spec({kind: ROOM_JOIN}))
-        const roomLeaves = roomEvents.filter(spec({kind: ROOM_LEAVE}))
-        const roomMembershipEvents = roomEvents.filter(event =>
-          [ROOM_MEMBERS, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER].includes(event.kind),
-        )
+        const roomJoins: TrustedEvent[] = []
+        const roomLeaves: TrustedEvent[] = []
+        const roomMembershipEvents: TrustedEvent[] = []
+
+        for (const event of roomEvents) {
+          switch (event.kind) {
+            case ROOM_JOIN:
+              roomJoins.push(event)
+              break
+            case ROOM_LEAVE:
+              roomLeaves.push(event)
+              break
+            case ROOM_MEMBERS:
+            case ROOM_ADD_MEMBER:
+            case ROOM_REMOVE_MEMBER:
+              roomMembershipEvents.push(event)
+              break
+          }
+        }
+
         const roomMembers = new Set(getRoomMembers(url, h, roomMembershipEvents))
 
         pendingJoins.push(
           ...removeUndefined(
-            Array.from(groupBy(e => e.pubkey, roomJoins).values())
-              .map(sortEventsDesc)
-              .map(first),
+            Array.from(groupBy(e => e.pubkey, roomJoins).values()).map(events =>
+              first(sortEventsDesc(events)),
+            ),
           ).filter(({pubkey, created_at}) => {
             if (roomMembers.has(pubkey)) return false
             if (

src/app/util/storage.ts

@@ -48,6 +48,18 @@ import {
 import type {Unsubscriber} from "svelte/store"
 import {db} from "@app/core/storage"
 
+// Shared interval for all non-critical store flushes, so they batch on the same cadence
+const FLUSH_INTERVAL = 3000
+
+// Wraps a write callback to run during idle time (non-critical persistence)
+const idleWrite = <T>(f: (xs: T[]) => void): ((xs: T[]) => void) => {
+  if (typeof requestIdleCallback !== "undefined") {
+    return (xs: T[]) => requestIdleCallback(() => f(xs))
+  }
+
+  return f
+}
+
 const kinds = {
   meta: [PROFILE, FOLLOWS, MUTES, RELAYS, BLOSSOM_SERVERS, MESSAGING_RELAYS, APP_DATA, ROOMS],
   alert: [ALERT_STATUS, ALERT_EMAIL, ALERT_WEB, ALERT_IOS, ALERT_ANDROID],
@@ -199,14 +211,15 @@ const loadCriticalRelays = async () => {
   relaysByUrl.set(indexBy(r => r.url, await table.getAll()))
 }
 
-const syncRelays = () => onRelay(batch(1000, db.table<RelayProfile>("relays").bulkPut))
+const syncRelays = () =>
+  onRelay(batch(FLUSH_INTERVAL, idleWrite(db.table<RelayProfile>("relays").bulkPut)))
 
 const initRelayStats = async () => {
   const table = db.table<RelayStats>("relayStats")
 
   relayStatsByUrl.set(indexBy(r => r.url, await table.getAll()))
 
-  return onRelayStats(batch(1000, table.bulkPut))
+  return onRelayStats(batch(FLUSH_INTERVAL, idleWrite(table.bulkPut)))
 }
 
 const initHandles = async () => {
@@ -214,7 +227,7 @@ const initHandles = async () => {
 
   handlesByNip05.set(indexBy(r => r.nip05, await table.getAll()))
 
-  return onHandle(batch(1000, table.bulkPut))
+  return onHandle(batch(FLUSH_INTERVAL, idleWrite(table.bulkPut)))
 }
 
 const initZappers = async () => {
@@ -222,7 +235,7 @@ const initZappers = async () => {
 
   zappersByLnurl.set(indexBy(z => z.lnurl, await table.getAll()))
 
-  return onZapper(batch(3000, table.bulkPut))
+  return onZapper(batch(FLUSH_INTERVAL, idleWrite(table.bulkPut)))
 }
 
 const initPlaintext = async () => {

src/lib/components/VirtualItem.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  let {
+    children,
+    root,
+    initiallyVisible = false,
+    estimatedHeight = 48,
+  }: {
+    children: Snippet
+    root?: HTMLElement
+    initiallyVisible?: boolean
+    estimatedHeight?: number
+  } = $props()
+
+  let visible = $state(initiallyVisible)
+  let height = $state(estimatedHeight)
+  let el: HTMLElement | undefined = $state()
+  let hasMeasured = false
+
+  $effect(() => {
+    if (!el) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          visible = true
+        } else {
+          // Measure actual height before hiding content
+          if (el) {
+            const h = el.offsetHeight
+            if (h > 0) {
+              height = h
+              hasMeasured = true
+            }
+          }
+          if (hasMeasured) {
+            visible = false
+          }
+        }
+      },
+      {root: root || null, rootMargin: "1000px 0px"},
+    )
+
+    observer.observe(el)
+    return () => observer.disconnect()
+  })
+</script>
+
+<div bind:this={el}>
+  {#if visible}
+    {@render children()}
+  {:else}
+    <div style:height="{height}px"></div>
+  {/if}
+</div>

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -30,6 +30,7 @@
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
+  import VirtualItem from "@lib/components/VirtualItem.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
   import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands"
   import {
@@ -105,6 +106,7 @@
   const shouldProtect = canEnforceNip70(url)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
+  const shouldVirtualize = $derived(isNaN(at))
 
   const showRoomDetail = () => pushModal(RoomDetail, {url, h})
 
@@ -468,7 +470,7 @@
             <Spinner loading={loadingForward}>Looking for messages...</Spinner>
           </p>
         {/if}
-        {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
+        {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
           {#if type === "new-messages"}
             <div
               {id}
@@ -480,8 +482,26 @@
             </div>
           {:else if type === "date"}
             <Divider>{value}</Divider>
+          {:else if shouldVirtualize}
+            <VirtualItem root={element} initiallyVisible={i < 25}>
+              {@const event = value as TrustedEvent}
+              {#if event.kind === ROOM_ADD_MEMBER}
+                <RoomItemAddMember {url} {event} />
+              {:else}
+                <div class="cv">
+                  <RoomItem
+                    {url}
+                    {event}
+                    {replyTo}
+                    {showPubkey}
+                    {addSpaceBelow}
+                    canEdit={canEditEvent}
+                    onEdit={onEditEvent} />
+                </div>
+              {/if}
+            </VirtualItem>
           {:else}
-            {@const event = $state.snapshot(value as TrustedEvent)}
+            {@const event = value as TrustedEvent}
             {#if event.kind === ROOM_ADD_MEMBER}
               <RoomItemAddMember {url} {event} />
             {:else}

src/routes/spaces/[relay]/chat/+page.svelte

@@ -21,6 +21,7 @@
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
+  import VirtualItem from "@lib/components/VirtualItem.svelte"
 
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
@@ -37,6 +38,7 @@
   const url = decodeRelay($page.params.relay!)
   const shouldProtect = canEnforceNip70(url)
   const at = $derived(parseInt($page.url.searchParams.get("at")!))
+  const shouldVirtualize = $derived(isNaN(at))
 
   const replyTo = (event: TrustedEvent) => {
     parent = event
@@ -305,7 +307,7 @@
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>
     </p>
   {/if}
-  {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
+  {#each elements as { type, id, value, showPubkey, addSpaceBelow }, i (id)}
     {#if type === "new-messages"}
       <div
         {id}
@@ -317,8 +319,26 @@
       </div>
     {:else if type === "date"}
       <Divider>{value}</Divider>
+    {:else if shouldVirtualize}
+      <VirtualItem root={element} initiallyVisible={i < 25}>
+        {@const event = value as TrustedEvent}
+        {#if event.kind === RELAY_ADD_MEMBER}
+          <RoomItemAddMember {url} {event} />
+        {:else}
+          <div>
+            <RoomItem
+              {url}
+              {event}
+              {replyTo}
+              {showPubkey}
+              canEdit={canEditEvent}
+              onEdit={onEditEvent}
+              {addSpaceBelow} />
+          </div>
+        {/if}
+      </VirtualItem>
     {:else}
-      {@const event = $state.snapshot(value as TrustedEvent)}
+      {@const event = value as TrustedEvent}
       {#if event.kind === RELAY_ADD_MEMBER}
         <RoomItemAddMember {url} {event} />
       {:else}