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 {
+  import {manageRelay, displayProfileByPubkey, loadMessagingRelayList} from "@welshman/app"
-    manageRelay,
-    deriveProfile,
-    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)