on xenial help sign in
Make the delegate of DashNavigationList an async Loader

This list may be created while horizontally swiping through scopes which means it may create all the visible delegates in a sync manner while the swipe animation is happening and be jumpy Previously the polish step of the list was taking around 230ms to in the amazon scope now it's around 7ms without any noticeable delay in other places of the code

commitdbee9946f19ea6bd5c348523c12033c2bcbca1a0 authorAlbert Astals Cid <albert.astals@canonical.com> dateTue 28 Jun 2016, 11:53 (10 years ago) parente762025
1 file changed+48−45
qml/Dash/DashNavigationList.qml+48−45
qml/Dash/DashNavigationList.qml+48−45
@@ -53,61 +53,64 @@ Item {
5353 Repeater {
5454 model: navigation && navigation.loaded ? navigation : null
5555 clip: true
56− // FIXME Move to ListItem (and remove import) once 1556971 is fixed
57− delegate: ListItems.Empty {
58− objectName: root.objectName + "child" + index
56+ delegate: Loader {
57+ asynchronous: true
5958 height: root.itemHeight
6059 width: column.width
61− anchors {
62− left: column.left
63− right: column.right
64− leftMargin: units.gu(2)
65− rightMargin: units.gu(2)
66− }
67−
68− onClicked: root.enterNavigation(navigationId, allLabel != "" ? allLabel : label, hasChildren)
69−
70− Icon {
71− id: leftIcon
60+ // FIXME Move to ListItem (and remove import) once 1556971 is fixed
61+ sourceComponent: ListItems.Empty {
62+ objectName: root.objectName + "child" + index
7263 anchors {
73− verticalCenter: parent.verticalCenter
7464 left: parent.left
65+ right: parent.right
66+ leftMargin: units.gu(2)
67+ rightMargin: units.gu(2)
7568 }
76− height: units.gu(2)
77− width: height
78− name: "tick"
79− color: "#3EB34F"
80− visible: isActive
81− }
8269
83− Label {
84− anchors {
85− verticalCenter: parent.verticalCenter
86− left: leftIcon.right
87− leftMargin: units.gu(1)
88− right: rightIcon.left
89− rightMargin: units.gu(2)
70+ onClicked: root.enterNavigation(navigationId, allLabel != "" ? allLabel : label, hasChildren)
71+
72+ Icon {
73+ id: leftIcon
74+ anchors {
75+ verticalCenter: parent.verticalCenter
76+ left: parent.left
77+ }
78+ height: units.gu(2)
79+ width: height
80+ name: "tick"
81+ color: "#3EB34F"
82+ visible: isActive
9083 }
91− text: label
92− color: isActive ? "#333333" : "#888888"
93− wrapMode: Text.Wrap
94− maximumLineCount: 2
95− elide: Text.ElideMiddle
96− }
9784
98− Icon {
99− id: rightIcon
100− anchors {
101− verticalCenter: parent.verticalCenter
102− right: parent.right
85+ Label {
86+ anchors {
87+ verticalCenter: parent.verticalCenter
88+ left: leftIcon.right
89+ leftMargin: units.gu(1)
90+ right: rightIcon.left
91+ rightMargin: units.gu(2)
92+ }
93+ text: label
94+ color: isActive ? "#333333" : "#888888"
95+ wrapMode: Text.Wrap
96+ maximumLineCount: 2
97+ elide: Text.ElideMiddle
98+ }
99+
100+ Icon {
101+ id: rightIcon
102+ anchors {
103+ verticalCenter: parent.verticalCenter
104+ right: parent.right
105+ }
106+ height: units.gu(2)
107+ width: height
108+ name: "go-next"
109+ visible: hasChildren
103110 }
104− height: units.gu(2)
105− width: height
106− name: "go-next"
107− visible: hasChildren
108− }
109111
110− divider.visible: index != navigation.count - 1
112+ divider.visible: index != navigation.count - 1
113+ }
111114 }
112115 }
113116 }