lockscreen: Dynamically load status bar and action drawer as needed for performance

Currently the lockscreen takes 5 seconds to load for me on the OnePlus 6. This MR moves the quicksettings and status bar to only load once the initial lockscreen has loaded (to avoid blocking it). This brings it down the initial load to 1 second for me.

components/mobileshell/qml/actiondrawer/ActionDrawerOpenSurface.qml

@@ -15,10 +15,8 @@ import org.kde.plasma.private.mobileshell as MobileShell
 MobileShell.SwipeArea {
     id: root
     mode: MobileShell.SwipeArea.VerticalOnly
-    
+
     required property ActionDrawer actionDrawer
-    
-    property int oldMouseY: 0
 
     function startSwipe() {
         if (actionDrawer.visible) {
@@ -28,22 +26,22 @@ MobileShell.SwipeArea {
         actionDrawer.cancelAnimations();
         actionDrawer.dragging = true;
         actionDrawer.opened = false;
-        
+
         // must be after properties other are set, we cannot have actionDrawer.updateState() be called
         actionDrawer.offset = 0;
         actionDrawer.oldOffset = 0;
         actionDrawer.visible = true;
     }
-    
+
     function endSwipe() {
         actionDrawer.dragging = false;
         actionDrawer.updateState();
     }
-    
+
     function updateOffset(offsetY) {
         actionDrawer.offset += offsetY;
     }
-    
+
     anchors.fill: parent
 
     onSwipeStarted: (point) => {

shell/contents/lockscreen/HeaderComponent.qml

@@ -21,9 +21,23 @@ Item {
 
     signal passwordRequested()
 
-    // top status bar
-    MobileShell.StatusBar {
-        id: statusBar
+    // The status bar and quicksettings take a while to load, don't pause initial lockscreen loading for it
+    Timer {
+        id: loadTimer
+        running: true
+        repeat: false
+        onTriggered: {
+            statusBarLoader.active = true
+            actionDrawerLoader.active = true
+        }
+    }
+
+    // Status bar
+    Loader {
+        id: statusBarLoader
+        active: false
+        asynchronous: true
+        visible: status == Loader.Ready
 
         anchors.top: parent.top
         anchors.left: parent.left
@@ -31,58 +45,82 @@ Item {
 
         height: root.statusBarHeight
 
-        Kirigami.Theme.inherit: false
-        Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
+        sourceComponent: MobileShell.StatusBar {
+            id: statusBar
 
-        backgroundColor: "transparent"
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+            height: root.statusBarHeight
 
-        showSecondRow: false
-        showDropShadow: true
-        showTime: false
-        disableSystemTray: true // prevent SIGABRT, since loading the system tray on the lockscreen leads to bad... things
+            Kirigami.Theme.inherit: false
+            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
+
+            backgroundColor: "transparent"
+
+            showSecondRow: false
+            showDropShadow: true
+            showTime: false
+            disableSystemTray: true // prevent SIGABRT, since loading the system tray on the lockscreen leads to bad... things
+        }
     }
 
-    // drag down gesture to open action drawer
+    // Drag down gesture to open action drawer
     MobileShell.ActionDrawerOpenSurface {
         id: swipeArea
-        actionDrawer: drawer
-        anchors.fill: statusBar
+        actionDrawer: actionDrawerLoader.item ? actionDrawerLoader.item.actionDrawer : null
+
+        anchors.fill: statusBarLoader
     }
 
-    // action drawer component
-    MobileShell.ActionDrawer {
-        id: drawer
+    // Dynamically load on swipe-down to avoid having to load at start
+    Loader {
+        id: actionDrawerLoader
+        active: false
+        asynchronous: true
+        visible: status == Loader.Ready
+
         anchors.fill: parent
 
-        visible: offset !== 0
-        restrictedPermissions: true
+        sourceComponent: Item {
+            property var actionDrawer: drawer
 
-        notificationSettings: NotificationManager.Settings {}
-        notificationModel: root.notificationsModel
-        notificationModelType: MobileShell.NotificationsModelType.WatchedNotificationsModel
+            // Action drawer component
+            MobileShell.ActionDrawer {
+                id: drawer
+                anchors.fill: parent
 
-        property bool requestNotificationAction: false
+                visible: offset !== 0
+                restrictedPermissions: true
 
-        // notification button clicked, requesting auth
-        onPermissionsRequested: {
-            requestNotificationAction = true;
-            drawer.close();
-            root.passwordRequested();
-        }
-    }
+                notificationSettings: NotificationManager.Settings {}
+                notificationModel: root.notificationsModel
+                notificationModelType: MobileShell.NotificationsModelType.WatchedNotificationsModel
 
-    // listen to authentication events
-    Connections {
-        target: authenticator
-        function onSucceeded() {
-            // run pending action if successfully unlocked
-            if (drawer.requestNotificationAction) {
-                drawer.runPendingAction();
-                drawer.requestNotificationAction = false;
+                property bool requestNotificationAction: false
+
+                // notification button clicked, requesting auth
+                onPermissionsRequested: {
+                    requestNotificationAction = true;
+                    drawer.close();
+                    root.passwordRequested();
+                }
+            }
+
+            // listen to authentication events
+            Connections {
+                target: authenticator
+                function onSucceeded() {
+                    // run pending action if successfully unlocked
+                    if (drawer.requestNotificationAction) {
+                        drawer.runPendingAction();
+                        drawer.requestNotificationAction = false;
+                    }
+                }
+                function onFailed() {
+                    drawer.requestNotificationAction = false;
+                }
             }
-        }
-        function onFailed() {
-            drawer.requestNotificationAction = false;
         }
     }
 }

shell/contents/lockscreen/LockScreen.qml

@@ -69,20 +69,14 @@ Item {
         anchors.fill: parent
 
         // Header bar and action drawer
-        Loader {
-            id: headerBarLoader
-            z: 1 // on top of flick area
-            readonly property real statusBarHeight: Kirigami.Units.gridUnit * 1.25
-
+        HeaderComponent {
+            id: headerBar
+            z: 1
             anchors.fill: parent
-            asynchronous: true
-
-            sourceComponent: HeaderComponent {
-                statusBarHeight: headerBarLoader.statusBarHeight
-                openFactor: flickable.openFactor
-                notificationsModel: root.notifModel
-                onPasswordRequested: root.askPassword()
-            }
+            statusBarHeight: Kirigami.Units.gridUnit * 1.25
+            openFactor: flickable.openFactor
+            notificationsModel: root.notifModel
+            onPasswordRequested: root.askPassword()
         }
 
         FlickContainer {
@@ -120,7 +114,7 @@ Item {
                 onNotificationsShownChanged: root.notificationsShown = notificationsShown
                 onPasswordRequested: flickable.goToOpenPosition()
 
-                anchors.topMargin: headerBarLoader.statusBarHeight
+                anchors.topMargin: headerBar.statusBarHeight
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
                 anchors.left: parent.left