diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx index dd62c58bd..035b7290a 100644 --- a/ts/components/conversation/Timeline.tsx +++ b/ts/components/conversation/Timeline.tsx @@ -399,12 +399,14 @@ export class Timeline extends React.Component< const newestBottomVisibleMessageId = getMessageIdFromElement(newestBottomVisible); - this.setState({ + this.updatePartiallyVisibleMessageIds( oldestPartiallyVisibleMessageId, - newestBottomVisibleMessageId, - }); + newestBottomVisibleMessageId + ); - setIsNearBottom(id, newIsNearBottom); + if (this.props.isNearBottom !== newIsNearBottom) { + setIsNearBottom(id, newIsNearBottom); + } if (newestBottomVisibleMessageId) { this.markNewestBottomVisibleMessageRead(); @@ -461,6 +463,19 @@ export class Timeline extends React.Component< this.intersectionObserver.observe(atBottomDetectorEl); } + private updatePartiallyVisibleMessageIds = throttle( + ( + oldestPartiallyVisibleMessageId: string | undefined, + newestBottomVisibleMessageId: string | undefined + ) => { + this.setState({ + oldestPartiallyVisibleMessageId, + newestBottomVisibleMessageId, + }); + }, + 100 + ); + private markNewestBottomVisibleMessageRead = throttle((): void => { const { id, markMessageRead } = this.props; const { newestBottomVisibleMessageId } = this.state;