bhavishy2801/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

remove VirtualItem

Browse Source
This commit is contained in:
Jon Staab
2026-04-13 10:35:26 -07:00
parent 9f386f6968
commit ef08821796
3 changed files with 30 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/VirtualItem.svelte
-53
View File
@@ -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>
src/routes/spaces/[relay]/[h]/+page.svelte
+15 -18
View File
@@ -30,7 +30,6 @@
import SpaceSearch from "@app/components/SpaceSearch.svelte" import SpaceSearch from "@app/components/SpaceSearch.svelte"
import ThunkToast from "@app/components/ThunkToast.svelte" import ThunkToast from "@app/components/ThunkToast.svelte"
import RoomItemAddMember from "@src/app/components/RoomItemAddMember.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 RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands" import {canEnforceNip70, prependParent, publishDelete} from "@app/core/commands"
import { import {
@@ -486,23 +485,21 @@
{:else if type === "date"} {:else if type === "date"}
<Divider>{value}</Divider> <Divider>{value}</Divider>
{:else if shouldVirtualize} {:else if shouldVirtualize}
<VirtualItem root={element} initiallyVisible={i < 25}> {@const event = value as TrustedEvent}
{@const event = value as TrustedEvent} {#if event.kind === ROOM_ADD_MEMBER}
{#if event.kind === ROOM_ADD_MEMBER} <RoomItemAddMember {url} {event} />
<RoomItemAddMember {url} {event} /> {:else}
{:else} <div class="cv">
<div class="cv"> <RoomItem
<RoomItem {url}
{url} {event}
{event} {replyTo}
{replyTo} {showPubkey}
{showPubkey} {addSpaceBelow}
{addSpaceBelow} canEdit={canEditEvent}
canEdit={canEditEvent} onEdit={onEditEvent} />
onEdit={onEditEvent} /> </div>
</div> {/if}
{/if}
</VirtualItem>
{:else} {:else}
{@const event = value as TrustedEvent} {@const event = value as TrustedEvent}
{#if event.kind === ROOM_ADD_MEMBER} {#if event.kind === ROOM_ADD_MEMBER}
src/routes/spaces/[relay]/chat/+page.svelte
+15 -18
View File
@@ -21,7 +21,6 @@
import SpaceSearch from "@app/components/SpaceSearch.svelte" import SpaceSearch from "@app/components/SpaceSearch.svelte"
import RoomItem from "@app/components/RoomItem.svelte" import RoomItem from "@app/components/RoomItem.svelte"
import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte" import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
import VirtualItem from "@lib/components/VirtualItem.svelte"
import RoomCompose from "@app/components/RoomCompose.svelte" import RoomCompose from "@app/components/RoomCompose.svelte"
import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte" import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
@@ -324,23 +323,21 @@
{:else if type === "date"} {:else if type === "date"}
<Divider>{value}</Divider> <Divider>{value}</Divider>
{:else if shouldVirtualize} {:else if shouldVirtualize}
<VirtualItem root={element} initiallyVisible={i < 25}> {@const event = value as TrustedEvent}
{@const event = value as TrustedEvent} {#if event.kind === RELAY_ADD_MEMBER}
{#if event.kind === RELAY_ADD_MEMBER} <RoomItemAddMember {url} {event} />
<RoomItemAddMember {url} {event} /> {:else}
{:else} <div>
<div> <RoomItem
<RoomItem {url}
{url} {event}
{event} {replyTo}
{replyTo} {showPubkey}
{showPubkey} canEdit={canEditEvent}
canEdit={canEditEvent} onEdit={onEditEvent}
onEdit={onEditEvent} {addSpaceBelow} />
{addSpaceBelow} /> </div>
</div> {/if}
{/if}
</VirtualItem>
{:else} {:else}
{@const event = value as TrustedEvent} {@const event = value as TrustedEvent}
{#if event.kind === RELAY_ADD_MEMBER} {#if event.kind === RELAY_ADD_MEMBER}