style: cancel old message highlight animations

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 #4203
 - fix: packaging: include architecture in filename for all appimages #4202
 - fix: make open external link scheme case insensive #4201
 

packages/frontend/src/components/composer/Composer.tsx

@@ -603,11 +603,8 @@ export function useDraft(
       } as Type.MessageQuote
       saveDraft()
 
-      // TODO improvement: perhaps the animation could used
-      // a little less intensity.
-      // Not good when jumping through several messages.
-      // Can we just cancel the animation on the previously highlighted message?
-      // Also it looks like it takes a while to execute
+      // TODO perf: jumpToMessage is not instant, but it should be
+      // since the message is (almost?) always already rendered.
       jumpToMessage(accountId, messageId, true)
     }
     // TODO perf: I imagine this is pretty slow, given IPC and some chats

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'