fix(ui): keep stream virtualized and bottom-anchored while loading

This commit is contained in:
Shantur Rathore
2026-03-02 22:47:21 +00:00
parent 4c5acefa07
commit b6bf58ea8f
2 changed files with 16 additions and 11 deletions

View File

@@ -558,7 +558,6 @@ export default function MessageSection(props: MessageSectionProps) {
getKeyFromAnchorId={getMessageIdFromAnchorId}
overscanPx={800}
scrollSentinelMarginPx={SCROLL_SENTINEL_MARGIN_PX}
virtualizationEnabled={() => !props.loading}
suspendMeasurements={() => !isActive()}
loading={() => Boolean(props.loading)}
isActive={isActive}

View File

@@ -340,7 +340,6 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
}
function handleContentRendered() {
if (isLoading()) return
scheduleAnchorScroll()
}
@@ -523,25 +522,32 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
createEffect(() => {
const loading = isLoading()
if (loading) {
// Keep the initial scroll pending while loading so we can
// anchor to the bottom as soon as items appear.
pendingInitialScroll = true
return
}
if (!pendingInitialScroll) {
return
}
if (!pendingInitialScroll) return
const container = scrollElement()
const sentinel = bottomSentinel()
if (!container || !sentinel || props.items().length === 0) {
return
if (!container || !sentinel || props.items().length === 0) return
// Ensure we're in follow-to-bottom mode for the initial position.
if (anchorLock()) {
clearAnchorLock()
}
setAutoScroll(true)
pendingInitialScroll = false
requestScrollToBottom(true)
// Scroll synchronously so the first paint prefers bottom content.
scrollToBottom(true)
})
let previousFollowToken: string | number | undefined
createEffect(() => {
const token = props.followToken?.()
if (isLoading() || token === undefined) {
if (token === undefined) {
previousFollowToken = token
return
}
@@ -735,7 +741,7 @@ export default function VirtualFollowList<T>(props: VirtualFollowListProps<T>) {
scrollContainer={scrollElement}
threshold={overscanPx}
placeholderClass="message-stream-placeholder"
virtualizationEnabled={() => virtualizationEnabled() && !isLoading()}
virtualizationEnabled={virtualizationEnabled}
suspendMeasurements={suspendMeasurements}
onHeightChange={(nextHeight, previousHeight) => {
const delta = nextHeight - previousHeight