From ef088217965cdf0d01b251c1ab05f302718811b1 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 13 Apr 2026 10:35:26 -0700
Subject: [PATCH] remove VirtualItem

---
 src/lib/components/VirtualItem.svelte       | 53 ---------------------
 src/routes/spaces/[relay]/[h]/+page.svelte  | 33 ++++++-------
 src/routes/spaces/[relay]/chat/+page.svelte | 33 ++++++-------
 3 files changed, 30 insertions(+), 89 deletions(-)
 delete mode 100644 src/lib/components/VirtualItem.svelte

diff --git a/src/lib/components/VirtualItem.svelte b/src/lib/components/VirtualItem.svelte
deleted file mode 100644
index 6c63b6eb..00000000
--- a/src/lib/components/VirtualItem.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<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>
diff --git a/src/routes/spaces/[relay]/[h]/+page.svelte b/src/routes/spaces/[relay]/[h]/+page.svelte
index b3db4a9a..bde74a9a 100644
--- a/src/routes/spaces/[relay]/[h]/+page.svelte
+++ b/src/routes/spaces/[relay]/[h]/+page.svelte
@@ -30,7 +30,6 @@
   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 {
@@ -486,23 +485,21 @@
           {: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>
+            {@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}
           {:else}
             {@const event = value as TrustedEvent}
             {#if event.kind === ROOM_ADD_MEMBER}
diff --git a/src/routes/spaces/[relay]/chat/+page.svelte b/src/routes/spaces/[relay]/chat/+page.svelte
index 04d52a1a..f5156f37 100644
--- a/src/routes/spaces/[relay]/chat/+page.svelte
+++ b/src/routes/spaces/[relay]/chat/+page.svelte
@@ -21,7 +21,6 @@
   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"
@@ -324,23 +323,21 @@
     {: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>
+      {@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}
     {:else}
       {@const event = value as TrustedEvent}
       {#if event.kind === RELAY_ADD_MEMBER}