Minor optimizations to the timeline delegates

* Use anchors instead of Layouts
* Don't use Loader for message display name
* Lazy load the emoji popup

imports/NeoChat/Component/Timeline/ReplyComponent.qml

@@ -11,48 +11,63 @@ import org.kde.kirigami 2.15 as Kirigami
 import org.kde.neochat 1.0
 import NeoChat.Component.Timeline 1.0
 
-QQC2.AbstractButton {
-    visible: replyVisible
-    Component.onCompleted: parent.Layout.fillWidth = true
+MouseArea {
+    id: replyButton
+    Layout.fillWidth: true
+    implicitHeight: replyName.implicitHeight + replyText.implicitHeight + Kirigami.Units.largeSpacing
+    implicitWidth: Math.min(bubbleMaxWidth, Math.max(replyText.implicitWidth, replyName.implicitWidth)) + Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 3
+    Component.onCompleted: {
+        parent.Layout.fillWidth = true;
+        parent.Layout.preferredWidth = Qt.binding(function() { return implicitWidth; })
+        parent.Layout.maximumWidth = Qt.binding(function() { return bubbleMaxWidth + Kirigami.Units.largeSpacing * 2; })
+    }
+    Rectangle {
+        id: replyLeftBorder
+        width: Kirigami.Units.smallSpacing
+        height: parent.height
+        color: Kirigami.Theme.highlightColor
+    }
 
-    contentItem: RowLayout {
-        Layout.fillWidth: true
+    Kirigami.Avatar {
+        id: avatatReply
+        anchors.left: replyLeftBorder.right
+        anchors.leftMargin: Kirigami.Units.smallSpacing
+        width: Kirigami.Units.gridUnit
+        height: Kirigami.Units.gridUnit
+        sourceSize.width: width
+        sourceSize.height: height
+        Layout.alignment: Qt.AlignTop
+        visible: Config.showAvatarInTimeline
+        source: reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : ""
+        name: reply.author.name || ""
+        color: reply.author.color
+    }
 
-        Rectangle {
-            Layout.preferredWidth: Kirigami.Units.smallSpacing
-            Layout.fillHeight: true
-
-            color: Kirigami.Theme.highlightColor
+    QQC2.Label {
+        id: replyName
+        anchors {
+            left: avatatReply.right
+            leftMargin: Kirigami.Units.smallSpacing
+            right: parent.right
+            rightMargin: Kirigami.Units.smallSpacing
         }
+        text: reply.author.displayName
+        color: reply.author.color
+        elide: Text.ElideRight
+    }
 
-        Kirigami.Avatar {
-            Layout.preferredWidth: Kirigami.Units.gridUnit
-            Layout.preferredHeight: Kirigami.Units.gridUnit
-            Layout.alignment: Qt.AlignTop
-            visible: Config.showAvatarInTimeline
-            source: replyVisible && reply.author.avatarMediaId ? ("image://mxc/" + reply.author.avatarMediaId) : ""
-            name: replyVisible ? (reply.author.name || "") : "H"
-            color: replyVisible ? reply.author.color : Kirigami.Theme.highlightColor
-        }
-
-        ColumnLayout {
-            id: replyLayout
-            Layout.fillWidth: true
-
-            QQC2.Label {
-                Layout.fillWidth: true
-                text: replyVisible ? reply.author.displayName : ""
-                color: replyVisible ? reply.author.color: null
-                elide: Text.ElideRight
-            }
-
-            TextDelegate {
-                Layout.fillWidth: true
-                Layout.leftMargin: 0
-                text: replyVisible ? ("<style>pre {white-space: pre-wrap} a{text-decoration: none; color: " + Kirigami.Theme.linkColor + ";} .user-pill{}</style>" + reply.display) : ""
-                textFormat: Text.RichText
-                wrapMode: Text.WordWrap
-            }
+    TextDelegate {
+        id: replyText
+        anchors {
+            left: avatatReply.right
+            top: replyName.bottom
+            leftMargin: Kirigami.Units.smallSpacing
+            topMargin: Kirigami.Units.smallSpacing
+            right: parent.right
+            rightMargin: Kirigami.Units.smallSpacing
         }
+        textMessage: reply.display
+        textFormat: Text.RichText
+        wrapMode: Text.WordWrap
     }
 }