style: cancel old message highlight animations (#4203)

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. Just FYI the added code usually takes 0.1-0.5ms to execute. Co-authored-by: Simon Laux <[email protected]>
deltachat · Oct 12, 2024 · 50c5b9b · 50c5b9b
1 parent 0680efe
commit 50c5b9b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/packages/frontend/src/components/composer/Composer.tsx b/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

diff --git a/packages/frontend/src/components/message/MessageList.tsx b/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'