From b3e2eda5e6df693e11a0b1d54de47247f297b691 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 28 Jul 2021 17:09:47 +0300
Subject: [PATCH] Message List: Fix blinking scrollbar when sending message

---
 src/components/middle/MessageList.scss |  7 +++----
 src/components/middle/MessageList.tsx  | 18 +++++-------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss
index d3bff43df..9173f9969 100644
--- a/src/components/middle/MessageList.scss
+++ b/src/components/middle/MessageList.scss
@@ -286,12 +286,11 @@
   }
 
   &.select-mode-active,
-  &.has-focusing,
+  &.has-focus-highlight,
   body.has-context-menu &,
   .animating > div > & {
     /*
-      We need to remove the width of the scrollbar for the full-width selection and
-      compensate for it with a right padding
+      Remove scrollbar for full-width selection and compensate it with right padding
     */
     &::-webkit-scrollbar {
       width: 0;
@@ -307,7 +306,7 @@
   }
 
   .is-safari &.select-mode-active,
-  .is-safari &.has-focusing,
+  .is-safari &.has-focus-highlight,
   .is-safari.has-context-menu .messages-layout & {
     padding-right: .375rem;
   }
diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx
index 460cb6f49..43060d742 100644
--- a/src/components/middle/MessageList.tsx
+++ b/src/components/middle/MessageList.tsx
@@ -86,6 +86,7 @@ type StateProps = {
   isRestricted?: boolean;
   restrictionReason?: ApiRestrictionReason;
   focusingId?: number;
+  hasFocusHighlight?: boolean;
   isSelectModeActive?: boolean;
   animationLevel?: number;
   lastMessage?: ApiMessage;
@@ -108,7 +109,6 @@ const INTERSECTION_MARGIN_FOR_MEDIA = IS_SINGLE_COLUMN_LAYOUT ? 300 : 500;
 const FOCUSING_DURATION = 1000;
 const BOTTOM_FOCUS_MARGIN = 20;
 const SELECT_MODE_ANIMATION_DURATION = 200;
-const FOCUSING_FADE_ANIMATION_DURATION = 200;
 const UNREAD_DIVIDER_CLASS = 'unread-divider';
 
 const runDebouncedForScroll = debounce((cb) => cb(), SCROLL_DEBOUNCE, false);
@@ -133,6 +133,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
   isRestricted,
   restrictionReason,
   focusingId,
+  hasFocusHighlight,
   isSelectModeActive,
   animationLevel,
   loadViewportMessages,
@@ -162,7 +163,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
   const shouldAnimateAppearanceRef = useRef(Boolean(lastMessage));
 
   const [containerHeight, setContainerHeight] = useState<number | undefined>();
-  const [hasFocusing, setHasFocusing] = useState<boolean>(Boolean(focusingId));
 
   const areMessagesLoaded = Boolean(messageIds);
 
@@ -243,16 +243,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
     throttleMs: INTERSECTION_THROTTLE_FOR_MEDIA,
   });
 
-  useEffect(() => {
-    if (focusingId) {
-      setHasFocusing(true);
-    } else {
-      setTimeout(() => {
-        setHasFocusing(false);
-      }, FOCUSING_FADE_ANIMATION_DURATION);
-    }
-  }, [focusingId]);
-
   const messageGroups = useMemo(() => {
     if (!messageIds || !messagesById) {
       return undefined;
@@ -521,8 +511,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
     noAvatars && 'no-avatars',
     !canPost && 'no-composer',
     type === 'pinned' && 'type-pinned',
+    hasFocusHighlight && 'has-focus-highlight',
     isSelectModeActive && 'select-mode-active',
-    hasFocusing && 'has-focusing',
     isScrolled && 'scrolled',
     !isReady && 'is-animating',
   );
@@ -765,6 +755,7 @@ export default memo(withGlobal<OwnProps>(
 
     const { isRestricted, restrictionReason, lastMessage } = chat;
     const focusingId = selectFocusedMessageId(global, chatId);
+    const hasFocusHighlight = focusingId ? !global.focusedMessage!.noHighlight : undefined;
 
     const withLastMessageWhenPreloading = (
       threadId === MAIN_THREAD_ID
@@ -793,6 +784,7 @@ export default memo(withGlobal<OwnProps>(
       isViewportNewest: type !== 'thread' || selectIsViewportNewest(global, chatId, threadId),
       threadFirstMessageId: selectFirstMessageId(global, chatId, threadId),
       focusingId,
+      hasFocusHighlight,
       isSelectModeActive: selectIsInSelectMode(global),
       animationLevel: global.settings.byKey.animationLevel,
       ...(withLastMessageWhenPreloading && { lastMessage }),