diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx index 399f0f56..b12e9f68 100644 --- a/src/app/features/room/RoomTimeline.tsx +++ b/src/app/features/room/RoomTimeline.tsx @@ -201,6 +201,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi const { markerTs } = useUnreadMarker(atBottomLazy, focused, readReceipt?.ts); useTimelineContainerResizeStickBottom( + timeline, getScrollElement, useCallback(() => timelineContainerRef.current, []), atBottomObservable, diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts index 91fea84f..2c52d8e8 100644 --- a/src/app/features/room/hooks/useTimeline.ts +++ b/src/app/features/room/hooks/useTimeline.ts @@ -178,6 +178,7 @@ export const useRestoreScrollToBottom = ( }; export const useTimelineContainerResizeStickBottom = ( + timeline: TimelineView, getScrollElement: () => HTMLElement | null, getContainerElement: () => HTMLElement | null, atBottomObservable: ObservableValue, @@ -199,12 +200,12 @@ export const useTimelineContainerResizeStickBottom = ( if (!containerEntry || !scrollElement) return; if (atBottomObservable.read) { - requestAnimationFrame(() => { - scrollToBottom(scrollElement, 'smooth'); - }); + const batchChange = timeline.batch.read.change; + const messageArrived = batchChange.type === 'Grow' && batchChange.dir === 'f'; + scrollToBottom(scrollElement, messageArrived ? 'smooth' : 'instant'); } }; - }, [getContainerElement, getScrollElement, atBottomObservable]), + }, [timeline, getContainerElement, getScrollElement, atBottomObservable]), enable ? getContainerElement : undefined ); };