feat(MainWindow/Contacts): use a `Loader` to display action buttons

tests/ui/views/App/MainWindow/Contacts.qml

@@ -102,6 +102,8 @@ ColumnLayout {
         height: ContactsStyle.contact.height
         width: parent.width
 
+        // -----------------------------------------------------------
+
         Rectangle {
           id: contact
 
@@ -149,14 +151,22 @@ ColumnLayout {
               }
 
               // Container.
-              Item {
+              Loader {
+                id: loader
+
                 Layout.fillWidth: true
                 Layout.fillHeight: true
+                sourceComponent: container1
+              }
+            }
+          }
 
-                RowLayout {
+          // ---------------------------------------------------------
+
+          Component {
             id: container1
 
-                  anchors.fill: parent
+            RowLayout {
               spacing: ContactsStyle.contact.spacing
 
               PresenceLevel {
@@ -170,13 +180,12 @@ ColumnLayout {
                 status: $contact.presenceStatus
               }
             }
+          }
 
-                Item {
+          Component {
             id: container2
 
-                  anchors.fill: parent
-                  visible: false
-
+            Item {
               ActionBar {
                 anchors {
                   left: parent.left
@@ -212,8 +221,6 @@ ColumnLayout {
               }
             }
           }
-            }
-          }
 
           // ---------------------------------------------------------
 
@@ -230,8 +237,10 @@ ColumnLayout {
               target: indicator
             }
 
-            PropertyChanges { target: container1; visible: false }
-            PropertyChanges { target: container2; visible: true }
+            PropertyChanges {
+              sourceComponent: container2
+              target: loader
+            }
           }
         }
       }