style: cancel old highlight animations

I.e. when we highlight a new message as a result of `jumpToMessage`,
remove the animation on the previously highlighted message
(or messages).

This is particularly useful for the Ctrl + Up shortcut
which is to choose the message to reply to.

CHANGELOG.md

@@ -47,6 +47,7 @@
 - losing scrolling "momentum" while scrolling the messages list fast #4122
 - fix crash when you chose Settings from a context menu on account you haven't selected #4190
 - fix All Media not opening from a context menu on account you haven't selected #4191
+- cancel old message highlight animations when a new message is highlighted
 
 <a id="1_46_8"></a>
 

packages/frontend/src/components/message/MessageList.tsx

@@ -346,6 +346,11 @@ export default function MessageList({ accountId, chat, refComposer }: Props) {
           domElement.tagName === 'LI' ? domElement : domElement.parentElement
         if (highlightableElement !== null) {
           setTimeout(() => {
+            // Stop the animation on the previously highlighted message.
+            highlightableElement.parentElement
+              ?.querySelectorAll(':scope > .highlight')
+              .forEach(el => el.classList.remove('highlight'))
+
             // Retrigger animation
             highlightableElement.classList.add('highlight')
             highlightableElement.style.animation = 'none'