fix: Prevent bouncing pending message (#990)

[SBISSUE-15149](https://sendbird.atlassian.net/browse/SBISSUE-15149)

### Fix
* Remove highlighted message system
* Set animated message id with null instead of 0

### ChangeLog
* Prevent bouncing pending message

Author: HoonBaek

src/modules/Channel/components/Message/index.tsx

@@ -13,8 +13,6 @@ const Message = (props: MessageProps): React.ReactElement => {
   const {
     initialized,
     currentGroupChannel,
-    highLightedMessageId,
-    setHighLightedMessageId,
     animatedMessageId,
     setAnimatedMessageId,
     updateMessage,
@@ -32,7 +30,6 @@ const Message = (props: MessageProps): React.ReactElement => {
     onReplyInThread,
     onQuoteMessageClick,
     onMessageAnimated,
-    onMessageHighlighted,
     sendMessage,
     localMessages,
   } = useChannelContext();
@@ -88,9 +85,6 @@ const Message = (props: MessageProps): React.ReactElement => {
       animatedMessageId={animatedMessageId}
       setAnimatedMessageId={setAnimatedMessageId}
       onMessageAnimated={onMessageAnimated}
-      highLightedMessageId={highLightedMessageId}
-      setHighLightedMessageId={setHighLightedMessageId}
-      onMessageHighlighted={onMessageHighlighted}
       renderFileViewer={(props) => <FileViewer {...props} />}
       renderRemoveMessageModal={(props) => <RemoveMessageModal {...props} />}
     />

src/modules/Channel/context/ChannelProvider.tsx

@@ -219,7 +219,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
   useEffect(() => {
     setInitialTimeStamp(startingPoint);
   }, [startingPoint, channelUrl]);
-  const [animatedMessageId, setAnimatedMessageId] = useState(0);
+  const [animatedMessageId, setAnimatedMessageId] = useState<number | null>(null);
   const [highLightedMessageId, setHighLightedMessageId] = useState(highlightedMessage);
   useEffect(() => {
     setHighLightedMessageId(highlightedMessage);

src/modules/GroupChannel/components/GroupChannelUI/index.scss

@@ -35,35 +35,6 @@
   padding: 0px 0px 24px 0px;
 }
 
-@keyframes sbHighlight {
-  0% {
-    background-color: #FFF2B6;
-  }
-  99% {
-    background-color: #FFF2B6;
-  }
-}
-
-@keyframes sbTextHighlight {
-  0% {
-    color: var(--sendbird-dark-onlight-01);
-  }
-  99% {
-    color: var(--sendbird-dark-onlight-01);
-  }
-}
-
-@keyframes sbHighlightBlock {
-  0% {
-    opacity: 0.5;
-    background-color: #FFF2B6;
-  }
-  99% {
-    opacity: 0.5;
-    background-color: #FFF2B6;
-  }
-}
-
 .sendbird-msg-hoc__animated {
   .sendbird-message-content {
     animation: bounce 1s ease;
@@ -76,51 +47,6 @@
   }
 }
 
-.sendbird-msg-hoc__highlighted {
-  .sendbird-text-message-item-body,
-  .sendbird-file-message-item-body {
-    animation-name: sbHighlight;
-    animation-duration: 1.6s;
-    animation-fill-mode: forwards;
-  }
-
-  .sendbird-text-message-item-body__message,
-  .sendbird-file-message-item-body__file-name__text {
-    animation-name: sbTextHighlight;
-    animation-duration: 1.6s;
-    animation-fill-mode: forwards;
-  }
-
-  .sendbird-voice-message-item-body {
-    display: block;
-    animation-name: sbHighlightBlock;
-    animation-duration: 1.6s;
-    animation-fill-mode: forwards;
-  }
-
-  .sendbird-thumbnail-message-item-body
-  .sendbird-thumbnail-message-item-body__image-cover {
-    display: block;
-    animation-name: sbHighlightBlock;
-    animation-duration: 1.6s;
-    animation-fill-mode: forwards;
-  }
-
-  .sendbird-og-message-item-body
-  .sendbird-og-message-item-body__cover {
-    display: block;
-    animation-name: sbHighlightBlock;
-    animation-duration: 1.6s;
-    animation-fill-mode: forwards;
-  }
-
-  .sendbird-message-content-reactions {
-    animation-name: sbHighlight;
-    animation-duration: 1.6s;
-    animation-fill-mode: forwards;
-  }
-}
-
 .sendbird-conversation__scroll-container {
   display: flex;
   height: 100%;

src/modules/GroupChannel/components/Message/MessageView.tsx

@@ -138,9 +138,6 @@ const MessageView = (props: MessageViewProps) => {
     setAnimatedMessageId,
     animatedMessageId,
     onMessageAnimated,
-    highLightedMessageId,
-    setHighLightedMessageId,
-    onMessageHighlighted,
   } = props;
 
   const { dateLocale, stringSet } = useLocalization();
@@ -154,7 +151,6 @@ const MessageView = (props: MessageViewProps) => {
   const [showRemove, setShowRemove] = useState(false);
   const [showFileViewer, setShowFileViewer] = useState(false);
   const [isAnimated, setIsAnimated] = useState(false);
-  const [isHighlighted, setIsHighlighted] = useState(false);
   const [mentionNickname, setMentionNickname] = useState('');
   const [mentionedUsers, setMentionedUsers] = useState([]);
   const [mentionedUserIds, setMentionedUserIds] = useState([]);
@@ -200,36 +196,10 @@ const MessageView = (props: MessageViewProps) => {
     handleScroll?.(true);
   }, []);
 
-  useLayoutEffect(() => {
-    const timeouts = [];
-
-    if (highLightedMessageId === message.messageId && messageScrollRef?.current) {
-      setIsAnimated(false);
-      timeouts.push(
-        setTimeout(() => {
-          setIsHighlighted(true);
-        }, 500),
-      );
-      timeouts.push(
-        setTimeout(() => {
-          setHighLightedMessageId(0);
-          onMessageHighlighted?.();
-        }, 1600),
-      );
-    } else {
-      setIsHighlighted(false);
-    }
-    return () => {
-      timeouts.forEach((it) => clearTimeout(it));
-    };
-  }, [highLightedMessageId, messageScrollRef.current, message.messageId]);
-
   useLayoutEffect(() => {
     const timeouts = [];
 
     if (animatedMessageId === message.messageId && messageScrollRef?.current) {
-      setIsHighlighted(false);
-
       timeouts.push(
         setTimeout(() => {
           setIsAnimated(true);
@@ -238,7 +208,7 @@ const MessageView = (props: MessageViewProps) => {
 
       timeouts.push(
         setTimeout(() => {
-          setAnimatedMessageId(0);
+          setAnimatedMessageId(null);
           onMessageAnimated?.();
         }, 1600),
       );
@@ -398,7 +368,6 @@ const MessageView = (props: MessageViewProps) => {
       className={getClassName([
         'sendbird-msg-hoc sendbird-msg--scroll-ref',
         isAnimated ? 'sendbird-msg-hoc__animated' : '',
-        isHighlighted ? 'sendbird-msg-hoc__highlighted' : '',
       ])}
       style={children || renderMessage ? undefined : { marginBottom: '2px' }}
       data-sb-message-id={message.messageId}

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -140,7 +140,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
 
   // State
   const [quoteMessage, setQuoteMessage] = useState<SendableMessageType>(null);
-  const [animatedMessageId, setAnimatedMessageId] = useState(0);
+  const [animatedMessageId, setAnimatedMessageId] = useState<number | null>(null);
   const [currentChannel, setCurrentChannel] = useState<GroupChannel | null>(null);
   const [fetchChannelError, setFetchChannelError] = useState<SendbirdError>(null);
 
@@ -259,7 +259,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       } finally {
         // Reset states when channel changes
         setQuoteMessage(null);
-        setAnimatedMessageId(0);
+        setAnimatedMessageId(null);
       }
     }
   }, [sdkStore.initialized, sdkStore.sdk, channelUrl]);
@@ -309,7 +309,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const scrollToBottom = usePreservedCallback(async () => {
     if (!scrollRef.current) return;
 
-    setAnimatedMessageId(0);
+    setAnimatedMessageId(null);
     setIsScrollBottomReached(true);
 
     if (config.isOnline && messageDataSource.hasNext()) {
@@ -345,7 +345,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
 
     clickHandler.deactivate();
 
-    setAnimatedMessageId(0);
+    setAnimatedMessageId(null);
     const message = messageDataSource.messages.find((it) => it.messageId === messageId || it.createdAt === createdAt);
     if (message) {
       const topOffset = getMessageTopOffset(message.createdAt);