perf: throttle member list derivation and use deduped profile stores in SpaceMembers and RoomMembersAdd

src/app/components/ProfileCircle.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import cx from "classnames"
   import {removeUndefined} from "@welshman/lib"
-  import {deriveProfile} from "@welshman/app"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
+  import {deriveDedupedProfile} from "@app/core/state"
 
   type Props = {
     pubkey?: string
@@ -14,7 +14,7 @@
 
   const {pubkey, url, size = 7, ...props}: Props = $props()
 
-  const profile = deriveProfile(pubkey, removeUndefined([url]))
+  const profile = deriveDedupedProfile(pubkey, removeUndefined([url]))
 </script>
 
 <ImageIcon

src/app/components/ProfileDetail.svelte

@@ -2,12 +2,7 @@
   import {onMount} from "svelte"
   import {removeUndefined} from "@welshman/lib"
   import {ManagementMethod} from "@welshman/util"
-  import {
-    manageRelay,
-    deriveProfile,
-    displayProfileByPubkey,
-    loadMessagingRelayList,
-  } from "@welshman/app"
+  import {manageRelay, displayProfileByPubkey, loadMessagingRelayList} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Letter from "@assets/icons/letter-opened.svg?dataurl"
@@ -28,7 +23,12 @@
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
-  import {pubkeyLink, deriveUserIsSpaceAdmin, deriveSpaceBannedPubkeyItems} from "@app/core/state"
+  import {
+    pubkeyLink,
+    deriveUserIsSpaceAdmin,
+    deriveSpaceBannedPubkeyItems,
+    deriveDedupedProfile,
+  } from "@app/core/state"
   import {addSpaceMembers} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -41,7 +41,7 @@
 
   const {pubkey, url}: Props = $props()
 
-  const profile = deriveProfile(pubkey, removeUndefined([url]))
+  const profile = deriveDedupedProfile(pubkey, removeUndefined([url]))
 
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
 

src/app/components/ProfileInfo.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {removeUndefined} from "@welshman/lib"
-  import {deriveProfile} from "@welshman/app"
+  import {deriveDedupedProfile} from "@app/core/state"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
 
   export type Props = {
@@ -10,7 +10,7 @@
 
   const {pubkey, url}: Props = $props()
 
-  const profile = deriveProfile(pubkey, removeUndefined([url]))
+  const profile = deriveDedupedProfile(pubkey, removeUndefined([url]))
 </script>
 
 {#if $profile}

src/app/components/RoomMembersAdd.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import {throttled} from "@welshman/store"
   import {setKey, popKey} from "@lib/implicit"
   import {sleep} from "@welshman/lib"
   import {displayProfileByPubkey} from "@welshman/app"
@@ -31,7 +32,7 @@
   const {url, h}: Props = $props()
 
   const room = deriveRoom(url, h)
-  const spaceMembers = deriveSpaceMembers(url)
+  const spaceMembers = throttled(300, deriveSpaceMembers(url))
 
   const back = () => history.back()
 

src/app/components/SpaceMembers.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {ManagementMethod} from "@welshman/util"
+  import {throttled} from "@welshman/store"
   import {manageRelay, displayProfileByPubkey} from "@welshman/app"
   import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import UserMinus from "@assets/icons/user-minus.svg?dataurl"
@@ -36,7 +37,7 @@
 
   const {url}: Props = $props()
 
-  const members = deriveSpaceMembers(url)
+  const members = throttled(300, deriveSpaceMembers(url))
   const bans = deriveSpaceBannedPubkeyItems(url)
   const userIsAdmin = deriveUserIsSpaceAdmin(url)
   const supportedMethods = deriveSupportedMethods(url)

src/app/components/SpaceSearch.svelte

@@ -2,9 +2,10 @@
   import {tick} from "svelte"
   import {debounce} from "throttle-debounce"
   import {request} from "@welshman/net"
-  import {formatTimestampAsDate, groupBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
+  import {repository, tracker} from "@welshman/app"
+  import {formatTimestampAsDate, groupBy, uniqBy, now, MINUTE, HOUR, DAY, WEEK} from "@welshman/lib"
   import type {TrustedEvent, Filter} from "@welshman/util"
-  import {sortEventsDesc} from "@welshman/util"
+  import {MESSAGE, sortEventsDesc} from "@welshman/util"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import {fly} from "@lib/transition"
@@ -53,8 +54,11 @@
 
   const getFilter = (searchTerm: string): Filter =>
     h
-      ? {kinds: CONTENT_KINDS, "#h": [h], search: searchTerm}
-      : {kinds: CONTENT_KINDS, search: searchTerm}
+      ? {kinds: [MESSAGE, ...CONTENT_KINDS], "#h": [h], search: searchTerm}
+      : {kinds: [MESSAGE, ...CONTENT_KINDS], search: searchTerm}
+
+  const getLocalResults = (filter: Filter) =>
+    repository.query([filter]).filter(event => tracker.getRelays(event.id).has(url))
 
   const search = debounce(300, async (searchTerm: string) => {
     controller?.abort()
@@ -68,18 +72,23 @@
     controller = new AbortController()
     loading = true
 
+    const filter = getFilter(searchTerm.trim())
+    const localResults = getLocalResults(filter)
+
+    results = sortEventsDesc(localResults)
+
     try {
       const events = await request({
         relays: getRelayUrls(),
         autoClose: true,
         signal: controller.signal,
-        filters: [getFilter(searchTerm.trim())],
+        filters: [filter],
       })
 
-      results = sortEventsDesc(events)
+      results = sortEventsDesc(uniqBy((e: TrustedEvent) => e.id, [...events, ...localResults]))
     } catch (error) {
       if (!(error instanceof DOMException && error.name === "AbortError")) {
-        results = []
+        results = sortEventsDesc(localResults)
       }
     } finally {
       loading = false

src/app/core/state.ts

@@ -147,6 +147,7 @@ import {
   makeUserData,
   makeUserLoader,
   manageRelay,
+  deriveProfile,
   displayProfileByPubkey,
   getProfile,
 } from "@welshman/app"
@@ -155,6 +156,25 @@ import {readFeed} from "@lib/feeds"
 
 export const fromCsv = (s: string) => (s || "").split(",").filter(identity)
 
+const profileStoreCache = new Map<string, ReturnType<typeof deriveProfile>>()
+
+export const deriveDedupedProfile = (
+  ...args: Parameters<typeof deriveProfile>
+): ReturnType<typeof deriveProfile> => {
+  const key = JSON.stringify(args)
+  const cached = profileStoreCache.get(key)
+
+  if (cached) {
+    return cached
+  }
+
+  const store = deriveProfile(...args)
+
+  profileStoreCache.set(key, store)
+
+  return store
+}
+
 export const ROOM = "h"
 
 export const PROTECTED = ["-"]