feat(desktop/searchMessage) Updating highlight animation

Added animation to highlight selected message
from search popup. Currenly when a message is clicked
from the search results, the user is navigated to
that message but it's not clear where is the
message in the screen

Closes #3562

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -112,7 +112,7 @@ Item {
     }
 
     function positionAtMessage(messageId) {
-        stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].item.scrollToMessage(messageId)
+        stackLayoutChatMessages.children[stackLayoutChatMessages.currentIndex].message.scrollToMessage(messageId)
     }
 
     Timer {
@@ -303,7 +303,9 @@ Item {
                     model: chatsModel.messageView
                     ColumnLayout {
                         property alias chatInput: chatInput
+                        property alias message: messageLoader.item
                         Loader {
+                            id: messageLoader
                             Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
                             Layout.fillWidth: true
                             Layout.fillHeight: true

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -61,7 +61,10 @@ Item {
             for (let i = 0; i < messageListDelegate.count; i++) {
                 item = messageListDelegate.items.get(i)
                 if (item.model.messageId === messageId) {
-                    chatLogView.positionViewAtIndex(i, ListView.Center)
+                    chatLogView.positionViewAtIndex(i, ListView.Center);
+                    if (appSettings.useCompactMode) {
+                        chatLogView.itemAtIndex(i).startMessageFoundAnimation();
+                    }
                     return
                 }
             }

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -140,6 +140,10 @@ Item {
         }
     }
 
+    function startMessageFoundAnimation() {
+        messageLoader.item.startMessageFoundAnimation();
+    }
+
     Connections {
         enabled: !placeholderMessage
         target: profileModel.contacts.list
@@ -206,6 +210,7 @@ Item {
     }
 
     Loader {
+        id: messageLoader
         width: parent.width
         sourceComponent: {
             switch(contentType) {

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml

@@ -82,6 +82,40 @@ Item {
         isActivityCenterMessage: activityCenterMessage
     }
 
+    function startMessageFoundAnimation() {
+        messageFoundAnimation.start();
+    }
+
+    SequentialAnimation {
+        id: messageFoundAnimation
+        PauseAnimation {
+            duration: 600
+        }
+         NumberAnimation {
+            target: highlightRect
+            property: "opacity"
+            to: 1.0
+            duration: 1500
+        }
+        PauseAnimation {
+            duration: 1000
+        }
+        NumberAnimation {
+           target: highlightRect
+           property: "opacity"
+            to: 0.0
+            duration: 1500
+        }
+    }
+
+    Rectangle {
+        id: highlightRect
+        anchors.fill: messageContainer
+        opacity: 0
+        visible: (opacity > 0.001)
+        color: Style.current.backgroundHoverLight
+    }
+
     Rectangle {
         property alias chatText: chatText
 
@@ -97,7 +131,6 @@ Item {
                 + (pinnedRectangleLoader.active ? Style.current.smallPadding : 0)
                 + (isEdit ? 25 : 0)
         width: parent.width
-
         color: {
             if (isEdit) {
                 return Style.current.backgroundHoverLight
@@ -116,7 +149,7 @@ Item {
             }
 
             return root.isHovered || isMessageActive ? (hasMention ? Style.current.mentionMessageHoverColor : Style.current.backgroundHoverLight) :
-                                                   (hasMention ? Style.current.mentionMessageColor : Style.current.transparent)
+                                                       (hasMention ? Style.current.mentionMessageColor : Style.current.transparent)
         }
 
         Loader {