Update src/routes/spaces/+page.svelte

src/app/components/Chat.svelte

@@ -279,7 +279,7 @@
   </div>
 </PageBar>
 
-<PageContent class="flex flex-col-reverse gap-2 py-4">
+<PageContent class="flex flex-col-reverse gap-2 pt-4">
   {#if missingRelayLists.length > 0}
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">

src/app/components/RoomDetail.svelte

@@ -243,7 +243,7 @@
         {/if}
       </div>
     </div>
-    {#if $members !== undefined && $members.length > 0}
+    {#if $members.length > 0}
       <div class="card2 card2-sm bg-alt flex items-center justify-between gap-4">
         <div class="flex items-center gap-4">
           <span>Members:</span>
@@ -251,10 +251,6 @@
         </div>
         <Button class="btn btn-neutral btn-sm" onclick={showMembers}>View All</Button>
       </div>
-    {:else if $members === undefined}
-      <div class="card2 card2-sm bg-base-200 flex items-center gap-4">
-        <span class="text-error">Member list not available from this relay</span>
-      </div>
     {/if}
     <div class="card2 card2-sm bg-alt col-4">
       <strong class="text-lg">Room Settings</strong>

src/app/components/RoomMembers.svelte

@@ -73,44 +73,34 @@
       </ModalSubtitle>
     </ModalHeader>
     <div class="flex flex-col gap-2">
-      {#if $members === undefined}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-error">Member list not available from this relay</span>
-        </div>
-      {:else if $members.length === 0}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-base-content/70">No members yet</span>
-        </div>
-      {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              <div class="relative">
-                <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
-                  <Icon icon={MenuDots} />
-                </Button>
-                {#if menuPubkey === pubkey}
-                  <Popover hideOnClick onClose={closeMenu}>
-                    <ul
-                      transition:fly
-                      class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
-                      <li>
-                        <Button class="text-error" onclick={() => removeMember(pubkey)}>
-                          <Icon icon={MinusCircle} />
-                          Remove Member
-                        </Button>
-                      </li>
-                    </ul>
-                  </Popover>
-                {/if}
-              </div>
+      {#each $members as pubkey (pubkey)}
+        <div class="card2 bg-alt relative">
+          <div class="flex items-center justify-between gap-2">
+            <div class="min-w-0 flex-1">
+              <Profile {pubkey} {url} />
+            </div>
+            <div class="relative">
+              <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
+                <Icon icon={MenuDots} />
+              </Button>
+              {#if menuPubkey === pubkey}
+                <Popover hideOnClick onClose={closeMenu}>
+                  <ul
+                    transition:fly
+                    class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                    <li>
+                      <Button class="text-error" onclick={() => removeMember(pubkey)}>
+                        <Icon icon={MinusCircle} />
+                        Remove Member
+                      </Button>
+                    </li>
+                  </ul>
+                </Popover>
+              {/if}
             </div>
           </div>
-        {/each}
-      {/if}
+        </div>
+      {/each}
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/RoomMembersAdd.svelte

@@ -56,11 +56,6 @@
   }
 
   const onSubmit = async () => {
-    if (!$spaceMembers) {
-      addMembers()
-      return
-    }
-
     const pubkeysSnapshot = $state.snapshot(pubkeys)
     const nonSpaceMembers = pubkeysSnapshot.filter(pubkey => !$spaceMembers.includes(pubkey))
 

src/app/components/SpaceMembers.svelte

@@ -112,58 +112,46 @@
       {/if}
     {/if}
     <div class="flex flex-col gap-2">
-      {#if $members === undefined}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-error">Member list not available from this space</span>
-        </div>
-      {:else if $members.length === 0}
-        <div class="card2 bg-base-200 p-4">
-          <span class="text-base-content/70">No members yet</span>
-        </div>
-      {:else}
-        {#each $members as pubkey (pubkey)}
-          <div class="card2 card2-sm bg-alt relative">
-            <div class="flex items-center justify-between gap-2">
-              <div class="min-w-0 flex-1">
-                <Profile {pubkey} {url} />
-              </div>
-              {#if canBan || canUnallow}
-                <div class="relative">
-                  <Button
-                    class="btn btn-circle btn-ghost btn-sm"
-                    onclick={() => toggleMenu(pubkey)}>
-                    <Icon icon={MenuDots} />
-                  </Button>
-                  {#if menuPubkey === pubkey}
-                    <Popover hideOnClick onClose={closeMenu}>
-                      <ul
-                        transition:fly
-                        class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
-                        {#if canUnallow}
-                          <li>
-                            <Button onclick={() => unallowMember(pubkey)}>
-                              <Icon icon={UserMinus} />
-                              Remove User
-                            </Button>
-                          </li>
-                        {/if}
-                        {#if canBan}
-                          <li>
-                            <Button class="text-error" onclick={() => banMember(pubkey)}>
-                              <Icon icon={MinusCircle} />
-                              Ban User
-                            </Button>
-                          </li>
-                        {/if}
-                      </ul>
-                    </Popover>
-                  {/if}
-                </div>
-              {/if}
+      {#each $members as pubkey (pubkey)}
+        <div class="card2 card2-sm bg-alt relative">
+          <div class="flex items-center justify-between gap-2">
+            <div class="min-w-0 flex-1">
+              <Profile {pubkey} {url} />
             </div>
+            {#if canBan || canUnallow}
+              <div class="relative">
+                <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
+                  <Icon icon={MenuDots} />
+                </Button>
+                {#if menuPubkey === pubkey}
+                  <Popover hideOnClick onClose={closeMenu}>
+                    <ul
+                      transition:fly
+                      class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                      {#if canUnallow}
+                        <li>
+                          <Button onclick={() => unallowMember(pubkey)}>
+                            <Icon icon={UserMinus} />
+                            Remove User
+                          </Button>
+                        </li>
+                      {/if}
+                      {#if canBan}
+                        <li>
+                          <Button class="text-error" onclick={() => banMember(pubkey)}>
+                            <Icon icon={MinusCircle} />
+                            Ban User
+                          </Button>
+                        </li>
+                      {/if}
+                    </ul>
+                  </Popover>
+                {/if}
+              </div>
+            {/if}
           </div>
-        {/each}
-      {/if}
+        </div>
+      {/each}
     </div>
   </ModalBody>
   <ModalFooter>

src/app/components/SpaceMenu.svelte

@@ -181,11 +181,7 @@
             <li>
               <Button onclick={showMembers}>
                 <Icon icon={UserRounded} />
-                {#if $members === undefined}
-                  View Members
-                {:else}
-                  View Members ({$members.length})
-                {/if}
+                View Members ({$members.length})
               </Button>
             </li>
             {#if $userIsAdmin}

src/app/core/commands.ts

@@ -766,10 +766,9 @@ export const addSpaceMembers = async (
   pubkeys: string[],
 ): Promise<string | undefined> => {
   const spaceMembers = get(deriveSpaceMembers(url))
-
   const results = await Promise.all(
     pubkeys
-      .filter(pubkey => !spaceMembers || !spaceMembers.includes(pubkey))
+      .filter(pubkey => !spaceMembers.includes(pubkey))
       .map(pubkey =>
         manageRelay(url, {
           method: ManagementMethod.AllowPubkey,

src/app/core/state.ts

@@ -808,49 +808,36 @@ export const deriveOtherRooms = (url: string) =>
 
 // Space/room memberships
 
-export const deriveSpaceMembers = (url: string) =>
-  derived(deriveRelaySignedEvents(url, [{kinds: [RELAY_MEMBERS]}]), ([event]) =>
-    uniq(getTagValues("member", event?.tags ?? [])),
-  )
+const getSpaceMembers = (_url: string, events: TrustedEvent[]) => {
+  const members = new Set<string>()
 
-export const deriveRoomMembers = (url: string, h: string) => {
-  const filters: Filter[] = [{kinds: [ROOM_MEMBERS], "#d": [h]}]
+  for (const event of sortEventsAsc(events)) {
+    if (event.kind === RELAY_MEMBERS) {
+      members.clear()
 
-  return derived(deriveEventsForUrl(url, filters), ([event]) =>
-    uniq(getPubkeyTagValues(event?.tags ?? [])),
-  )
-}
+      for (const pubkey of uniq(getTagValues("member", event.tags))) {
+        members.add(pubkey)
+      }
 
-export type BannedPubkeyItem = {
-  pubkey: string
-  reason: string
-}
-
-export const spaceBannedPubkeyItems = new Map<string, BannedPubkeyItem[]>()
-
-export const deriveSpaceBannedPubkeyItems = (url: string) => {
-  const store = writable(spaceBannedPubkeyItems.get(url) || [])
-
-  manageRelay(url, {method: ManagementMethod.ListBannedPubkeys, params: []}).then(res => {
-    spaceBannedPubkeyItems.set(url, res.result)
-    store.set(res.result)
-  })
-
-  return store
-}
-
-export const deriveRoomAdmins = (url: string, h: string) => {
-  const filters: Filter[] = [{kinds: [ROOM_ADMINS], "#d": [h]}]
-
-  return derived(deriveEventsForUrl(url, filters), $events => {
-    const adminsEvent = first($events)
-
-    if (adminsEvent) {
-      return getPubkeyTagValues(adminsEvent.tags)
+      continue
     }
 
-    return []
-  })
+    const pubkeys = getPubkeyTagValues(event.tags)
+
+    if (event.kind === RELAY_ADD_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.add(pubkey)
+      }
+    }
+
+    if (event.kind === RELAY_REMOVE_MEMBER) {
+      for (const pubkey of pubkeys) {
+        members.delete(pubkey)
+      }
+    }
+  }
+
+  return Array.from(members)
 }
 
 const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
@@ -889,6 +876,53 @@ const getRoomMembers = (_url: string, h: string, events: TrustedEvent[]) => {
   return Array.from(members)
 }
 
+export const deriveSpaceMembers = (url: string) =>
+  derived(
+    deriveRelaySignedEvents(url, [{kinds: [RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER, RELAY_MEMBERS]}]),
+    $events => getSpaceMembers(url, $events),
+  )
+
+export type BannedPubkeyItem = {
+  pubkey: string
+  reason: string
+}
+
+export const spaceBannedPubkeyItems = new Map<string, BannedPubkeyItem[]>()
+
+export const deriveSpaceBannedPubkeyItems = (url: string) => {
+  const store = writable(spaceBannedPubkeyItems.get(url) || [])
+
+  manageRelay(url, {method: ManagementMethod.ListBannedPubkeys, params: []}).then(res => {
+    spaceBannedPubkeyItems.set(url, res.result)
+    store.set(res.result)
+  })
+
+  return store
+}
+
+export const deriveRoomMembers = (url: string, h: string) => {
+  const filters: Filter[] = [
+    {kinds: [ROOM_MEMBERS], "#d": [h]},
+    {kinds: [ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]},
+  ]
+
+  return derived(deriveEventsForUrl(url, filters), $events => getRoomMembers(url, h, $events))
+}
+
+export const deriveRoomAdmins = (url: string, h: string) => {
+  const filters: Filter[] = [{kinds: [ROOM_ADMINS], "#d": [h]}]
+
+  return derived(deriveEventsForUrl(url, filters), $events => {
+    const adminsEvent = first($events)
+
+    if (adminsEvent) {
+      return getPubkeyTagValues(adminsEvent.tags)
+    }
+
+    return []
+  })
+}
+
 // Action items (admin review queue)
 // const pendingJoins: TrustedEvent[] = []
 
@@ -985,49 +1019,19 @@ export const deriveUserIsSpaceAdmin = memoize((url?: string) => {
 })
 
 export const deriveUserSpaceMembershipStatus = (url: string) => {
-  // Fetch member list and user add/remove events directly in this derivation.
-  const memberListFilters: Filter[] = [{kinds: [RELAY_MEMBERS]}]
-  const userEventFilters: Filter[] = [{kinds: [RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]}]
+  const filters: Filter[] = [{kinds: [RELAY_JOIN, RELAY_LEAVE]}]
 
   return derived(
     [
       pubkey,
-      deriveRelaySignedEvents(url, memberListFilters),
-      deriveRelaySignedEvents(url, userEventFilters),
-      deriveEventsForUrl(url, [{kinds: [RELAY_JOIN, RELAY_LEAVE]}]),
+      deriveSpaceMembers(url),
+      deriveEventsForUrl(url, filters),
       deriveUserIsSpaceAdmin(url),
     ],
-    ([$pubkey, $memberListEvents, $userAddRemoveEvents, $joinLeaveEvents, $isAdmin]) => {
-      // If admin, always granted.
-      if ($isAdmin) {
-        return MembershipStatus.Granted
-      }
+    ([$pubkey, $members, $events, $isAdmin]) => {
+      const isMember = $members.includes($pubkey!) || $isAdmin
 
-      const membersEvent = $memberListEvents.find(spec({kind: RELAY_MEMBERS}))
-      const memberList = membersEvent ? uniq(getTagValues("member", membersEvent.tags)) : undefined
-
-      let isMember = false
-
-      if (memberList) {
-        // Member list exists - check if user is in it.
-        isMember = memberList.includes($pubkey!)
-      } else {
-        // No member list available - replay the user's add/remove history.
-        for (const event of sortBy(e => e.created_at, $userAddRemoveEvents)) {
-          if (event.pubkey !== $pubkey) {
-            continue
-          }
-
-          if (event.kind === RELAY_ADD_MEMBER) {
-            isMember = true
-          } else if (event.kind === RELAY_REMOVE_MEMBER) {
-            isMember = false
-          }
-        }
-      }
-
-      for (const event of $joinLeaveEvents) {
-        // Join events indicate pending or granted status, leave resets to initial.
+      for (const event of $events) {
         if (event.pubkey !== $pubkey) {
           continue
         }
@@ -1053,46 +1057,19 @@ export const deriveUserIsRoomAdmin = (url: string, h: string) =>
   )
 
 export const deriveUserRoomMembershipStatus = (url: string, h: string) => {
-  // Fetch the room member list and the current user's add/remove events.
-  const userEventFilters: Filter[] = [{kinds: [ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER], "#h": [h]}]
-  const joinLeaveFilters: Filter[] = [{kinds: [ROOM_JOIN, ROOM_LEAVE], "#h": [h]}]
+  const filters: Filter[] = [{kinds: [ROOM_JOIN, ROOM_LEAVE], "#h": [h]}]
 
   return derived(
     [
       pubkey,
       deriveRoomMembers(url, h),
-      deriveEventsForUrl(url, userEventFilters),
-      deriveEventsForUrl(url, joinLeaveFilters),
+      deriveEventsForUrl(url, filters),
       deriveUserIsRoomAdmin(url, h),
     ],
-    ([$pubkey, $memberList, $userAddRemoveEvents, $joinLeaveEvents, $isAdmin]) => {
-      // If admin of this room's space, always granted.
-      if ($isAdmin) {
-        return MembershipStatus.Granted
-      }
+    ([$pubkey, $members, $events, $isAdmin]) => {
+      const isMember = $members.includes($pubkey!) || $isAdmin
 
-      let isMember = false
-
-      if ($memberList) {
-        // Member list exists - check if user is in it.
-        isMember = $memberList.includes($pubkey!)
-      } else {
-        // No member list available - replay the user's add/remove history.
-        for (const event of sortEventsAsc($userAddRemoveEvents)) {
-          if (event.pubkey !== $pubkey) {
-            continue
-          }
-
-          if (event.kind === ROOM_ADD_MEMBER) {
-            isMember = true
-          } else if (event.kind === ROOM_REMOVE_MEMBER) {
-            isMember = false
-          }
-        }
-      }
-
-      for (const event of $joinLeaveEvents) {
-        // Join events indicate pending or granted status, leave resets to initial.
+      for (const event of $events) {
         if (event.pubkey !== $pubkey) {
           continue
         }

src/app/core/sync.ts

@@ -284,7 +284,7 @@ const syncSpace = (url: string) => {
           {kinds: [MESSAGE, ...CONTENT_KINDS], since, "#h": [room]},
           makeCommentFilter(CONTENT_KINDS, {since, "#h": [room]}),
           {
-            kinds: [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE],
+            kinds: [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER],
             "#h": [room],
           },
           {kinds: [PollResponse], since},
@@ -293,15 +293,15 @@ const syncSpace = (url: string) => {
     }
   }
 
-  const relayKinds = [RELAY_MEMBERS]
+  const relayKinds = [RELAY_MEMBERS, RELAY_ADD_MEMBER, RELAY_REMOVE_MEMBER]
   const roomMetaKinds = [ROOM_META, ROOM_ADMINS, ROOM_MEMBERS, LIVEKIT_PARTICIPANTS]
-  const roomDeleteKinds = [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE]
+  const roomMemberKinds = [ROOM_DELETE, ROOM_JOIN, ROOM_LEAVE, ROOM_ADD_MEMBER, ROOM_REMOVE_MEMBER]
 
   pullAndListen({
     url,
     signal: controller.signal,
     filters: [
-      {kinds: [...relayKinds, ...roomMetaKinds, ...roomDeleteKinds, ...CONTENT_KINDS, MESSAGE]},
+      {kinds: [...relayKinds, ...roomMetaKinds, ...roomMemberKinds, ...CONTENT_KINDS, MESSAGE]},
       makeCommentFilter(CONTENT_KINDS, {since}),
       {kinds: [PollResponse], since},
     ],

src/app/editor/index.ts

@@ -79,7 +79,7 @@ export const makeEditor = async ({
         getValue: (profile: PublishedProfile) => profile.event.pubkey,
         sortFn: ({score = 1, item}) => {
           const wotScore = getWotGraph().get(item.event.pubkey) || 0
-          const membershipScale = $spaceMembers?.includes(item.event.pubkey) ? 2 : 1
+          const membershipScale = $spaceMembers.includes(item.event.pubkey) ? 2 : 1
 
           return dec(score) * inc(wotScore / getMaxWot()) * membershipScale
         },

src/lib/components/VirtualItem.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  type Props = {
+    children: Snippet
+    root?: HTMLElement
+    initiallyVisible?: boolean
+    estimatedHeight?: number
+  }
+
+  const {children, root, initiallyVisible = false, estimatedHeight = 48}: Props = $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/people/+page.svelte

@@ -40,7 +40,7 @@
 <Page>
   <ContentSearch>
     {#snippet input()}
-      <label class="row-2 input input-bordered w-full">
+      <label class="row-2 input input-bordered">
         <Icon icon={Magnifier} />
         <!-- svelte-ignore a11y_autofocus -->
         <input

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 {
@@ -485,21 +486,23 @@
           {:else if type === "date"}
             <Divider>{value}</Divider>
           {:else if shouldVirtualize}
-            {@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 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 = value as TrustedEvent}
             {#if event.kind === ROOM_ADD_MEMBER}

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"
@@ -323,21 +324,23 @@
     {:else if type === "date"}
       <Divider>{value}</Divider>
     {:else if shouldVirtualize}
-      {@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 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 = value as TrustedEvent}
       {#if event.kind === RELAY_ADD_MEMBER}