Add NLoader

Modules/Bar/Bar.qml

@@ -79,9 +79,7 @@ PanelWindow {
       NIconButton {
         id: demoPanelToggler
         icon: "experiment"
-        onClicked: function () {
-          demoPanel.visible ? demoPanel.hide() : demoPanel.show()
-        }
+        onClicked: function () { demoPanel.isLoaded = !demoPanel.isLoaded }
       }
     }
   }

Modules/DemoPanel/DemoPanel.qml

@@ -10,12 +10,18 @@ import qs.Widgets
   An experiment/demo panel to tweaks widgets
 */
 
-
-NPanel {
+NLoader {
   id: root
 
+  panel: Component {
+    NPanel {
+      id: demoPanel
+
       readonly property real scaling: Scaling.scale(screen)
 
+      // Ensure panel shows itself once created
+      Component.onCompleted: show()
+
       Rectangle {
         color: Colors.backgroundPrimary
         radius: Style.radiusMedium * scaling
@@ -25,11 +31,8 @@ NPanel {
         height: 400
         anchors.centerIn: parent
 
-
         // Prevent closing when clicking in the panel bg
-    MouseArea {
-      anchors.fill: parent
-    }
+        MouseArea { anchors.fill: parent }
 
         ColumnLayout {
           anchors.fill: parent
@@ -39,71 +42,43 @@ NPanel {
           // NIconButton
           ColumnLayout {
             spacing: 16 * scaling
-        NText {
-          text: "NIconButton + NTooltip"
-          color: Colors.accentSecondary
-        }
+            NText { text: "NIconButton"; color: Colors.accentSecondary }
 
             NIconButton {
               id: myIconButton
               icon: "refresh"
-          onEntered: function() {
-            myTooltip.show();
-          }
-          onExited: function() {
-            myTooltip.hide();
-          }
-        }
-
-        NTooltip {
-          id: myTooltip
-          target: myIconButton
-          positionAbove: false
-          text: "Hello world"
+              onEntered: function() { myTooltip.show() }
+              onExited: function() { myTooltip.hide() }
             }
 
             NDivider { Layout.fillWidth: true }
           }
 
-
           // NToggle
           ColumnLayout {
             spacing: Style.marginLarge * scaling
             uniformCellSizes: true
-        NText {
-          text: "NToggle"
-          color: Colors.accentSecondary
-        }
+            NText { text: "NToggle + NTooltip"; color: Colors.accentSecondary }
 
             NToggle {
               label: "Label"
               description: "Description"
-          onToggled: function(value: bool) {
-            console.log("NToggle: " + value)
-          }
+              onToggled: function(value: bool) { console.log("NToggle: " + value) }
             }
 
-
-        NDivider {
-          Layout.fillWidth: true
-        }
+            NTooltip { id: myTooltip; target: myIconButton; positionAbove: false; text: "Hello world" }
+            NDivider { Layout.fillWidth: true }
           }
 
           // NSlider
           ColumnLayout {
             spacing: 16 * scaling
-
-        NText {
-          text: "NSlider"
-          color: Colors.accentSecondary
-        }
-
+            NText { text: "NSlider"; color: Colors.accentSecondary }
             NSlider {}
-        NDivider {
-          Layout.fillWidth: true
-        }
-      }
-
+            NDivider { Layout.fillWidth: true }
+          }
+        }
+      }
     }
   }
 }

Widgets/NLoader.qml

@@ -0,0 +1,31 @@
+import QtQuick
+
+Loader {
+  id: loader
+
+  // Boolean control to load/unload the item
+  property bool isLoaded: false
+
+  // Provide the component to load.
+  // Example usage:
+  // content: Component { NPanel { /* ... */ } }
+  property Component panel
+
+  active: isLoaded
+  asynchronous: true
+  sourceComponent: panel
+
+  onActiveChanged: {
+    if (active && item && item.show) item.show()
+  }
+
+  onItemChanged: {
+    if (active && item && item.show) item.show()
+  }
+
+  Connections {
+    target: loader.item
+    function onDismissed() { loader.isLoaded = false }
+  }
+}
+

Widgets/NPanel.qml

@@ -10,9 +10,11 @@ PanelWindow {
   property bool showOverlay: Settings.settings.dimPanels
   property int topMargin: Style.barHeight * scaling
   property color overlayColor: showOverlay ? Colors.overlay : "transparent"
+  signal dismissed()
 
   function hide() {
     visible = false
+    dismissed()
   }
 
   function show() {

shell.qml

@@ -24,22 +24,6 @@ ShellRoot {
   Background {}
   Overview {}
 
-  // Variants {
-  //   model: Quickshell.screens
-
-  //   delegate: Background {
-  //     modelData: item
-  //   }
-  // }
-
-  // Variants {
-  //   model: Quickshell.screens
-
-  //   delegate: Overview {
-  //     modelData: item
-  //   }
-  // }
-
   DemoPanel {
     id: demoPanel
   }