From ea0e1a6c9a0cebc3a9141aae09d44ff63e70f1a7 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 9 Dec 2024 14:03:59 -0800
Subject: [PATCH] Improve performance a bit

---
 src/app/components/EventItem.svelte           | 10 ++-
 src/app/state.ts                              |  4 +-
 src/routes/+layout.svelte                     |  6 +-
 src/routes/spaces/[relay]/[room]/+page.svelte | 63 +++++++------------
 4 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/src/app/components/EventItem.svelte b/src/app/components/EventItem.svelte
index 2134839..390fece 100644
--- a/src/app/components/EventItem.svelte
+++ b/src/app/components/EventItem.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
   import {fromPairs} from "@welshman/lib"
-  import {secondsToDate, getLocale, formatTimestamp, formatTimestampAsDate} from "@welshman/app"
+  import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
 
   export let event
 
-  const timeFmt = new Intl.DateTimeFormat(getLocale(), {timeStyle: "short"})
-
   $: meta = fromPairs(event.tags) as Record<string, string>
   $: end = parseInt(meta.end)
   $: start = parseInt(meta.start)
-  $: startDate = secondsToDate(start)
-  $: endDate = secondsToDate(end)
   $: startDateDisplay = formatTimestampAsDate(start)
   $: endDateDisplay = formatTimestampAsDate(end)
   $: isSingleDay = startDateDisplay === endDateDisplay
@@ -21,6 +17,8 @@
   <span>{meta.title || meta.name}</span>
   <div class="flex items-center gap-2 text-sm">
     <Icon icon="clock-circle" size={4} />
-    {timeFmt.format(startDate)} — {isSingleDay ? timeFmt.format(endDate) : formatTimestamp(end)}
+    {formatTimestampAsTime(start)} — {isSingleDay
+      ? formatTimestampAsTime(end)
+      : formatTimestamp(end)}
   </div>
 </div>
diff --git a/src/app/state.ts b/src/app/state.ts
index 4d57b8c..53a060f 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -46,7 +46,7 @@ import {
   getDefaultNetContext,
   makeRouter,
   tracker,
-  trackerStore,
+  makeTrackerStore,
   relay,
   getSession,
   getSigner,
@@ -224,6 +224,8 @@ export const pullConservatively = ({relays, filters}: AppSyncOpts) => {
   return Promise.all(promises)
 }
 
+export const trackerStore = makeTrackerStore()
+
 export const deriveEvent = (idOrAddress: string, hints: string[] = []) => {
   let attempted = false
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2ba7322..76d8ab6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -150,7 +150,6 @@
       setupAnalytics()
 
       ready = initStorage("flotilla", 4, {
-        events: storageAdapters.fromRepository(repository, {throttle: 300, migrate: migrateEvents}),
         relays: {keyPath: "url", store: throttled(1000, relays)},
         handles: {keyPath: "nip05", store: throttled(1000, handles)},
         checked: storageAdapters.fromObjectStore(checked, {throttle: 1000}),
@@ -162,7 +161,10 @@
           throttle: 1000,
           migrate: migratePlaintext,
         }),
-        tracker: storageAdapters.fromTracker(tracker, {throttle: 1000}),
+        events: storageAdapters.fromRepositoryAndTracker(repository, tracker, {
+          throttle: 3000,
+          migrate: migrateEvents,
+        }),
       }).then(() => sleep(300))
 
       // Unwrap gift wraps as they come in, but throttled
diff --git a/src/routes/spaces/[relay]/[room]/+page.svelte b/src/routes/spaces/[relay]/[room]/+page.svelte
index 88ad885..169371f 100644
--- a/src/routes/spaces/[relay]/[room]/+page.svelte
+++ b/src/routes/spaces/[relay]/[room]/+page.svelte
@@ -1,12 +1,3 @@
-<script lang="ts" context="module">
-  type Element = {
-    id: string
-    type: "date" | "note"
-    value: string | TrustedEvent
-    showPubkey: boolean
-  }
-</script>
-
 <script lang="ts">
   import {nip19} from "nostr-tools"
   import {onMount, onDestroy} from "svelte"
@@ -49,7 +40,7 @@
   const {room = GENERAL} = $page.params
   const content = popKey<string>("content") || ""
   const url = decodeRelay($page.params.relay)
-  const events = deriveChannelMessages(url, room)
+  const events = throttled(300, deriveChannelMessages(url, room))
 
   const assertEvent = (e: any) => e as TrustedEvent
 
@@ -76,39 +67,33 @@
   let scroller: Scroller
   let editor: Readable<Editor>
 
-  const elements = throttled(
-    300,
-    derived(
-      events,
-      $events => {
-        const $elements = []
+  const elements = derived(events, $events => {
+    const $elements = []
 
-        let previousDate
-        let previousPubkey
+    let previousDate
+    let previousPubkey
 
-        for (const event of $events.toReversed()) {
-          const {id, pubkey, created_at} = event
-          const date = formatTimestampAsDate(created_at)
+    for (const event of $events.toReversed()) {
+      const {id, pubkey, created_at} = event
+      const date = formatTimestampAsDate(created_at)
 
-          if (date !== previousDate) {
-            $elements.push({type: "date", value: date, id: date, showPubkey: false})
-          }
-
-          $elements.push({
-            id,
-            type: "note",
-            value: event,
-            showPubkey: date !== previousDate || previousPubkey !== pubkey,
-          })
-
-          previousDate = date
-          previousPubkey = pubkey
-        }
-
-        return $elements.reverse().slice(0, limit)
+      if (date !== previousDate) {
+        $elements.push({type: "date", value: date, id: date, showPubkey: false})
       }
-    )
-  )
+
+      $elements.push({
+        id,
+        type: "note",
+        value: event,
+        showPubkey: date !== previousDate || previousPubkey !== pubkey,
+      })
+
+      previousDate = date
+      previousPubkey = pubkey
+    }
+
+    return $elements.reverse().slice(0, limit)
+  })
 
   onMount(async () => {
     // Sveltekiiit