From b4ada5d5d0121ffc3f6bc67e6c22d30bac3d5451 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Thu, 19 Aug 2021 10:33:54 +0300 Subject: [PATCH] Message List: Prevent scroll jumps when selecting --- src/components/middle/MessageList.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 0428c904e..264fb2bf8 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -87,7 +87,7 @@ type StateProps = { type DispatchProps = Pick; -const BOTTOM_THRESHOLD = 100; +const BOTTOM_THRESHOLD = 20; const UNREAD_DIVIDER_TOP = 10; const UNREAD_DIVIDER_TOP_WITH_TOOLS = 60; const SCROLL_DEBOUNCE = 200; @@ -335,12 +335,8 @@ const MessageList: FC = ({ const scrollOffset = scrollOffsetRef.current!; const lastItemElement = listItemElementsRef.current[listItemElementsRef.current.length - 1]; - // If two messages come at once (e.g. via Quiz Bot) then the first message will update `scrollOffset` - // right away (before animation) which creates inconsistency until the animation completes. - // To workaround that, we calculate `isAtBottom` with a "buffer" of the latest message height (this is approximate). - const lastItemHeight = lastItemElement ? lastItemElement.offsetHeight : 0; const isAtBottom = isViewportNewest && prevIsViewportNewest && ( - scrollOffset - (prevContainerHeight || offsetHeight) - lastItemHeight <= BOTTOM_THRESHOLD + scrollOffset - (prevContainerHeight || offsetHeight) <= BOTTOM_THRESHOLD ); let newScrollTop!: number;