From 8cb4420d499bb77d6a91272946fa57badf84b924 Mon Sep 17 00:00:00 2001
From: Alex Jbanca <alexjb@status.im>
Date: Thu, 12 Jan 2023 16:32:51 +0200
Subject: [PATCH] perf(chatScroll): Create message quick context items only
 when message row is hovered

---
 ui/StatusQ/src/StatusQ/Components/StatusMessage.qml | 13 +++++++++----
 ui/imports/shared/views/chat/MessageView.qml        | 11 ++++++++---
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
index 0fa7ec4019..5fb59feddd 100644
--- a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml
@@ -23,7 +23,7 @@ Control {
         Invitation = 7
     }
 
-    property alias quickActions: quickActionsPanel.items
+    property list<Item> quickActions
     property var statusChatInput
     property alias linksComponent: linksLoader.sourceComponent
     property alias transcationComponent: transactionBubbleLoader.sourceComponent
@@ -365,13 +365,18 @@ Control {
             }
         }
 
-        StatusMessageQuickActions {
-            id: quickActionsPanel
+        Loader {
+            active: root.hovered && !root.hideQuickActions
             anchors.right: parent.right
             anchors.rightMargin: 20
             anchors.top: parent.top
             anchors.topMargin: -8
-            visible: root.hovered && !root.hideQuickActions
+            sourceComponent: Component {
+                StatusMessageQuickActions {
+                    id: quickActionsPanel
+                    items: root.quickActions
+                }
+            }
         }
     }
 
diff --git a/ui/imports/shared/views/chat/MessageView.qml b/ui/imports/shared/views/chat/MessageView.qml
index 23cb127984..945cc7485d 100644
--- a/ui/imports/shared/views/chat/MessageView.qml
+++ b/ui/imports/shared/views/chat/MessageView.qml
@@ -727,7 +727,7 @@ Loader {
 
                 quickActions: [
                     Loader {
-                        active: !root.isInPinnedPopup
+                        active: !root.isInPinnedPopup && delegate.hovered
                         sourceComponent: StatusFlatRoundButton {
                             width: d.chatButtonSize
                             height: d.chatButtonSize
@@ -741,7 +741,7 @@ Loader {
                         }
                     },
                     Loader {
-                        active: !root.isInPinnedPopup
+                        active: !root.isInPinnedPopup && delegate.hovered
                         sourceComponent: StatusFlatRoundButton {
                             objectName: "replyToMessageButton"
                             width: d.chatButtonSize
@@ -758,7 +758,7 @@ Loader {
                         }
                     },
                     Loader {
-                        active: !root.isInPinnedPopup && root.isText && !root.editModeOn && root.amISender
+                        active: !root.isInPinnedPopup && root.isText && !root.editModeOn && root.amISender && delegate.hovered
                         visible: active
                         sourceComponent: StatusFlatRoundButton {
                             objectName: "editMessageButton"
@@ -774,6 +774,9 @@ Loader {
                     },
                     Loader {
                         active: {
+                            if(!delegate.hovered)
+                                return false;
+                                
                             if (!root.messageStore)
                                 return false
 
@@ -819,6 +822,8 @@ Loader {
                     },
                     Loader {
                         active: {
+                            if(!delegate.hovered)
+                                return false;
                             if (root.isInPinnedPopup)
                                 return false;
                             if (!root.messageStore)