shell: Load applet configuration dynamically, and add animation

shell/contents/configuration/AppletConfiguration.qml

@@ -21,7 +21,10 @@ Rectangle {
 //BEGIN properties
     
     property bool isContainment: false
-    property alias appComponent: app
+    property alias app: appLoader.item
+    property bool loadApp: true
+    
+    signal appLoaded()
     
 //END properties
 
@@ -120,16 +123,6 @@ Rectangle {
         }
     }
     
-    Component.onCompleted: {
-        // if we are a containment then the first item will be ConfigurationContainmentAppearance
-        // if the applet does not have own configs then the first item will be Shortcuts
-        if (isContainment || !configDialog.configModel || configDialog.configModel.count === 0) {
-            open(root.globalConfigModel.get(0))
-        } else {
-            open(configDialog.configModel.get(0))
-        }
-    }
-    
 //END connections
 
 //BEGIN UI components
@@ -139,38 +132,34 @@ Rectangle {
         ConfigurationKcmPage {}
     }
     
-    Component {
+    Loader {
-        id: configCategoryDelegate
+        id: appLoader
-        Kirigami.NavigationTabButton {
-            icon.name: model.icon
-            text: model.name
-//             recolorIcon: false
-            QQC2.ButtonGroup.group: footerBar.tabGroup
-            
-            onClicked: {
-                if (checked) {
-                    root.open(model);
-                }
-            }
-            
-            checked: {
-                if (app.pageStack.currentItem) {
-                    if (model.kcm && app.pageStack.currentItem.kcm) {
-                        return model.kcm == app.pageStack.currentItem.kcm;
-                    } else if (app.pageStack.currentItem.configItem) {
-                        return model.source == app.pageStack.currentItem.configItem.source;
-                    } else {
-                        return app.pageStack.currentItem.source == Qt.resolvedUrl(model.source);
-                    }
-                }
-                return false;
-            }
-        }
-    }
-    
-    Kirigami.ApplicationItem {
-        id: app
         anchors.fill: parent
+        asynchronous: true
+        active: root.loadApp
+        onLoaded: {
+            // if we are a containment then the first item will be ConfigurationContainmentAppearance
+            // if the applet does not have own configs then the first item will be Shortcuts
+            if (isContainment || !configDialog.configModel || configDialog.configModel.count === 0) {
+                root.open(root.globalConfigModel.get(0))
+            } else {
+                root.open(configDialog.configModel.get(0))
+            }
+            
+            root.appLoaded();
+        }
+        
+        sourceComponent: Kirigami.ApplicationItem {
+            id: app
+            
+            // animation on show
+            opacity: 0
+            NumberAnimation on opacity {
+                to: 1
+                running: true
+                duration: Kirigami.Units.longDuration
+                easing.type: Easing.InOutQuad
+            }
             
             pageStack.globalToolBar.canContainHandles: true
             pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar
@@ -216,6 +205,36 @@ Rectangle {
                     delegate: configCategoryDelegate
                 }
             }
+            
+            Component {
+                id: configCategoryDelegate
+                Kirigami.NavigationTabButton {
+                    icon.name: model.icon
+                    text: model.name
+        //             recolorIcon: false
+                    QQC2.ButtonGroup.group: footerBar.tabGroup
+                    
+                    onClicked: {
+                        if (checked) {
+                            root.open(model);
+                        }
+                    }
+                    
+                    checked: {
+                        if (app.pageStack.currentItem) {
+                            if (model.kcm && app.pageStack.currentItem.kcm) {
+                                return model.kcm == app.pageStack.currentItem.kcm;
+                            } else if (app.pageStack.currentItem.configItem) {
+                                return model.source == app.pageStack.currentItem.configItem.source;
+                            } else {
+                                return app.pageStack.currentItem.source == Qt.resolvedUrl(model.source);
+                            }
+                        }
+                        return false;
+                    }
+                }
+            }
+        }
     }
 //END UI components
 }

shell/contents/configuration/ContainmentConfiguration.qml

@@ -14,13 +14,15 @@ import org.kde.plasma.configuration 2.0
 AppletConfiguration {
     id: root
     isContainment: true
-
+    loadApp: false
-    appComponent.visible: false
-    appComponent.width: root.width < root.height ? root.width : Math.min(root.width, Math.max(appComponent.implicitWidth, PlasmaCore.Units.gridUnit * 45))
-    appComponent.height: Math.min(root.height, Math.max(appComponent.implicitHeight, PlasmaCore.Units.gridUnit * 29))
 
     readonly property bool horizontal: root.width > root.height
 
+    onAppLoaded: {
+        app.width = root.width < root.height ? root.width : Math.min(root.width, Math.max(app.implicitWidth, PlasmaCore.Units.gridUnit * 45));
+        app.height = Math.min(root.height, Math.max(app.implicitHeight, PlasmaCore.Units.gridUnit * 29));
+    }
+    
 //BEGIN model
     globalConfigModel: globalContainmentConfigModel
 
@@ -108,7 +110,7 @@ AppletConfiguration {
                     icon.height: PlasmaCore.Units.iconSizes.medium
                     text: i18n("Configure")
                     onClicked: {
-                        appComponent.visible = true;
+                        root.loadApp = true;
                     }
                 }
             }