Use loaders in lockscreen to reduce memory usage and improve loading

Also add a small animation to move when swiping up for these loader components

look-and-feel/contents/lockscreen/LockScreen.qml

@@ -20,7 +20,7 @@ PlasmaCore.ColorScope {
     property string password
     
     property bool isWidescreen: root.height < root.width * 0.75
-    property bool notificationsShown: phoneNotificationsList.count !== 0
+    property bool notificationsShown: false
 
     property bool is24HourTime: Qt.locale().timeFormat(Locale.ShortFormat).toLowerCase().indexOf("ap") === -1
     
@@ -43,6 +43,7 @@ PlasmaCore.ColorScope {
         duration: units.longDuration
         easing.type: Easing.InOutQuad
     }
+    
     // blur background once keypad is open
     FastBlur {
         id: blur
@@ -53,7 +54,6 @@ PlasmaCore.ColorScope {
         opacity: 0
         
         property bool doBlur: notificationsShown || isPinDrawerOpen() // only blur once animation finished for performance
-        
         Behavior on doBlur {
             NumberAnimation {
                 target: blur
@@ -70,7 +70,9 @@ PlasmaCore.ColorScope {
     }
     
     // header bar
-    SimpleHeaderBar {
+    Loader {
+        id: headerBar
+        asynchronous: true
         anchors {
             top: parent.top
             left: parent.left
@@ -78,117 +80,140 @@ PlasmaCore.ColorScope {
         }
         height: units.gridUnit
         opacity: 1 - (passwordFlickable.contentY / passwordFlickable.columnHeight)
+        sourceComponent: SimpleHeaderBar {}
     }
-    
+
-    // phone clock component
+    // phone lockscreen component
-    ColumnLayout {
+    Loader {
-        id: phoneClockComponent
+        id: phoneComponent
         visible: !isWidescreen
-        z: passwordFlickable.contentY === 0 ? 5 : 0 // in front of password flickable when closed
+        active: visible
-        
-        anchors {
-            top: parent.top
-            topMargin: root.height / 2 - (height / 2 + units.gridUnit * 2)
-            left: parent.left
-            right: parent.right
-        }
-        spacing: 0
         opacity: 1 - (passwordFlickable.contentY / passwordFlickable.columnHeight)
         
-        states: State {
+        asynchronous: true
-            name: "notification"; when: notificationsShown
+        z: passwordFlickable.contentY === 0 ? 5 : 0 // in front of password flickable when closed
-            PropertyChanges { target: phoneClockComponent; anchors.topMargin: units.gridUnit * 5 }
+        anchors {
+            top: parent.top
+            bottom: scrollUpIcon.top
+            left: parent.left
+            right: parent.right
+            topMargin: item && !root.notificationsShown ? Math.round(root.height / 2 - (item.implicitHeight / 2 + PlasmaCore.Units.gridUnit * 2)) : PlasmaCore.Units.gridUnit * 5
+            bottomMargin: PlasmaCore.Units.gridUnit
         }
-        
+        Behavior on anchors.topMargin {
-        transitions: Transition {
             NumberAnimation {
-                properties: "anchors.topMargin"
+                duration: loadTimer.running ? 0 : PlasmaCore.Units.longDuration
                 easing.type: Easing.InOutQuad
             }
         }
+        // avoid topMargin animation when item is being loaded
+        onLoaded: loadTimer.restart();
+        Timer {
+            id: loadTimer
+            interval: PlasmaCore.Units.longDuration
+        }
         
-        Clock {
+        // move while swiping up
-            id: phoneClock
+        transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) }
-            alignment: Qt.AlignHCenter
-            Layout.bottomMargin: units.gridUnit * 2 // keep spacing even if media controls are gone
-        }
-        MediaControls {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: true
-            Layout.maximumWidth: units.gridUnit * 25
-            Layout.minimumWidth: units.gridUnit * 15
-            Layout.leftMargin: units.gridUnit
-            Layout.rightMargin: units.gridUnit
-        }
-    }
-    
-    // tablet clock component
-    Item {
-        id: tabletClockComponent
-        visible: isWidescreen
-        width: parent.width / 2   
-        anchors {
-            top: parent.top
-            bottom: parent.bottom
-            left: parent.left
-            leftMargin: units.gridUnit * 3
-        }
-        z: passwordFlickable.contentY === 0 ? 5 : 0 // in front of password flickable when closed
         
-        ColumnLayout {
+        sourceComponent: ColumnLayout {
-            id: tabletLayout
+            id: phoneClockComponent
-            anchors.centerIn: parent
+            spacing: 0
-            spacing: units.gridUnit
-            opacity: 1 - (passwordFlickable.contentY / passwordFlickable.columnHeight)
             
             Clock {
-                id: tabletClock
+                id: phoneClock
-                alignment: Qt.AlignLeft
+                alignment: Qt.AlignHCenter
-                Layout.fillWidth: true
+                Layout.bottomMargin: units.gridUnit * 2 // keep spacing even if media controls are gone
-                Layout.minimumWidth: units.gridUnit * 20
             }
             MediaControls {
-                Layout.alignment: Qt.AlignLeft
+                Layout.alignment: Qt.AlignHCenter
                 Layout.fillWidth: true
-                Layout.maximumWidth: units.gridUnit * 25
+                Layout.maximumWidth: PlasmaCore.Units.gridUnit * 25
-                Layout.minimumWidth: units.gridUnit * 20
+                Layout.minimumWidth: PlasmaCore.Units.gridUnit * 15
+                Layout.leftMargin: PlasmaCore.Units.gridUnit
+                Layout.rightMargin: PlasmaCore.Units.gridUnit
+            }
+            
+            NotificationsList {
+                id: phoneNotificationsList
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.topMargin: PlasmaCore.Units.gridUnit
+                z: passwordFlickable.contentY === 0 ? 5 : 0 // prevent mousearea from interfering with pin drawer
+                onCountChanged: root.notificationsShown = count !== 0
             }
         }
     }
     
-    // phone notifications list
+    // tablet lockscreen component
-    NotificationsList {
+    Loader {
-        id: phoneNotificationsList
+        id: tabletComponent
-        visible: !isWidescreen
-        z: passwordFlickable.contentY === 0 ? 5 : 0 // prevent mousearea from interfering with pin drawer
-        anchors {
-            top: phoneClockComponent.bottom
-            topMargin: units.gridUnit
-            bottom: scrollUpIcon.top
-            bottomMargin: units.gridUnit
-            left: parent.left
-            right: parent.right
-        }
-    }
-    
-    // tablet notifications list
-    ColumnLayout {
         visible: isWidescreen
-        z: passwordFlickable.contentY === 0 ? 5 : 0 // prevent mousearea from interfering with pin drawer
+        active: visible
-        anchors {
+        opacity: 1 - (passwordFlickable.contentY / passwordFlickable.columnHeight)
-            top: parent.top
-            bottom: parent.bottom
-            left: tabletClockComponent.right
-            right: parent.right
-            rightMargin: units.gridUnit
-        }
         
-        NotificationsList {
+        asynchronous: true
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+        z: passwordFlickable.contentY === 0 ? 5 : 0 // in front of password flickable when closed
-            Layout.fillWidth: true
+        anchors.top: headerBar.bottom
-            Layout.minimumHeight: this.notificationListHeight
+        anchors.left: parent.left
-            Layout.minimumWidth: units.gridUnit * 15
+        anchors.right: parent.right
-            Layout.maximumWidth: units.gridUnit * 25
+        anchors.bottom: scrollUpIcon.top
+        
+        // move while swiping up
+        transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) }
+        
+        sourceComponent: Item {
+            Item {
+                id: tabletClockComponent
+                width: parent.width / 2   
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: parent.left
+                    leftMargin: PlasmaCore.Units.gridUnit * 3
+                }
+                
+                ColumnLayout {
+                    id: tabletLayout
+                    anchors.centerIn: parent
+                    spacing: PlasmaCore.Units.gridUnit
+                    
+                    Clock {
+                        id: tabletClock
+                        alignment: Qt.AlignLeft
+                        Layout.fillWidth: true
+                        Layout.minimumWidth: PlasmaCore.Units.gridUnit * 20
+                    }
+                    MediaControls {
+                        Layout.alignment: Qt.AlignLeft
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: PlasmaCore.Units.gridUnit * 25
+                        Layout.minimumWidth: PlasmaCore.Units.gridUnit * 20
+                    }
+                }
+            }
+                
+            // tablet notifications list
+            ColumnLayout {
+                id: tabletNotificationsList
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    left: tabletClockComponent.right
+                    right: parent.right
+                    rightMargin: PlasmaCore.Units.gridUnit
+                }
+                
+                NotificationsList {
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                    Layout.fillWidth: true
+                    Layout.maximumHeight: parent.height
+                    Layout.minimumHeight: this.notificationListHeight
+                    Layout.minimumWidth: PlasmaCore.Units.gridUnit * 15
+                    Layout.maximumWidth: PlasmaCore.Units.gridUnit * 25
+                    onCountChanged: root.notificationsShown = count !== 0
+                }
+            }
         }
     }
     

look-and-feel/contents/lockscreen/NotificationsList.qml

@@ -100,9 +100,9 @@ Item {
 
     Component {
         id: notificationComponent
-        Column {
+        ColumnLayout {
             width: notificationListView.width
-            spacing: units.smallSpacing
+            spacing: PlasmaCore.Units.smallSpacing
             
             // insert application heading here once application grouping is implemented
             
@@ -118,16 +118,14 @@ Item {
         
         anchors {
             top: parent.top
-            left: parent.left
+            horizontalCenter: parent.horizontalCenter
-            right: parent.right
-            leftMargin: units.gridUnit
-            rightMargin: units.gridUnit
         }
+        width: Math.min(PlasmaCore.Units.gridUnit * 25, parent.width - PlasmaCore.Units.gridUnit * 2)
         height: Math.min(contentHeight, parent.height) // don't take up the entire screen for notification list view
 
         interactive: contentHeight > parent.height // only allow scrolling on notifications list if it is long enough
         opacity: 1 - (passwordFlickable.contentY / passwordFlickable.columnHeight)
-        spacing: units.gridUnit
+        spacing: PlasmaCore.Units.gridUnit
         
         delegate: Kirigami.DelegateRecycler {
             sourceComponent: notificationComponent