Add NLoader

Modules/Bar/Bar.qml

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

Modules/DemoPanel/DemoPanel.qml

@@ -10,100 +10,75 @@ import qs.Widgets
   An experiment/demo panel to tweaks widgets
 */
 
-
+NLoader {
-NPanel {
   id: root
 
-  readonly property real scaling: Scaling.scale(screen)
+  panel: Component {
+    NPanel {
+      id: demoPanel
 
-  Rectangle {
+      readonly property real scaling: Scaling.scale(screen)
-    color: Colors.backgroundPrimary
-    radius: Style.radiusMedium * scaling
-    border.color: Colors.backgroundTertiary
-    border.width: Math.min(1, Style.borderMedium * scaling)
-    width: 500 * scaling
-    height: 400
-    anchors.centerIn: parent
 
+      // Ensure panel shows itself once created
+      Component.onCompleted: show()
 
-    // Prevent closing when clicking in the panel bg
+      Rectangle {
-    MouseArea {
+        color: Colors.backgroundPrimary
-      anchors.fill: parent
+        radius: Style.radiusMedium * scaling
-    }
+        border.color: Colors.backgroundTertiary
+        border.width: Math.min(1, Style.borderMedium * scaling)
+        width: 500 * scaling
+        height: 400
+        anchors.centerIn: parent
 
-    ColumnLayout {
+        // Prevent closing when clicking in the panel bg
-      anchors.fill: parent
+        MouseArea { anchors.fill: parent }
-      anchors.margins: Style.marginXL * scaling
-      spacing: Style.marginSmall * scaling
 
-      // NIconButton
+        ColumnLayout {
-      ColumnLayout {
+          anchors.fill: parent
-        spacing: 16 * scaling
+          anchors.margins: Style.marginXL * scaling
-        NText {
+          spacing: Style.marginSmall * scaling
-          text: "NIconButton + NTooltip"
-          color: Colors.accentSecondary
-        }
 
-        NIconButton {
+          // NIconButton
-          id: myIconButton
+          ColumnLayout {
-          icon: "refresh"
+            spacing: 16 * scaling
-          onEntered: function() {
+            NText { text: "NIconButton"; color: Colors.accentSecondary }
-            myTooltip.show();
+
+            NIconButton {
+              id: myIconButton
+              icon: "refresh"
+              onEntered: function() { myTooltip.show() }
+              onExited: function() { myTooltip.hide() }
+            }
+
+            NDivider { Layout.fillWidth: true }
           }
-          onExited: function() {
+
-            myTooltip.hide();
+          // NToggle
+          ColumnLayout {
+            spacing: Style.marginLarge * scaling
+            uniformCellSizes: true
+            NText { text: "NToggle + NTooltip"; color: Colors.accentSecondary }
+
+            NToggle {
+              label: "Label"
+              description: "Description"
+              onToggled: function(value: bool) { console.log("NToggle: " + value) }
+            }
+
+            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 }
+            NSlider {}
+            NDivider { Layout.fillWidth: true }
           }
         }
-
-        NTooltip {
-          id: myTooltip
-          target: myIconButton
-          positionAbove: false
-          text: "Hello world"
-        }
-
-        NDivider {Layout.fillWidth: true}
       }
-
-
-      // NToggle
-      ColumnLayout {
-        spacing: Style.marginLarge * scaling
-        uniformCellSizes: true
-        NText {
-          text: "NToggle"
-          color: Colors.accentSecondary
-        }
-
-        NToggle {
-          label: "Label"
-          description: "Description"
-          onToggled: function(value: bool) {
-            console.log("NToggle: " + value)
-          }
-        }
-
-
-        NDivider {
-          Layout.fillWidth: true
-        }
-      }
-
-      // NSlider
-      ColumnLayout {
-        spacing: 16 * scaling
-
-        NText {
-          text: "NSlider"
-          color: Colors.accentSecondary
-        }
-
-        NSlider {}
-        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
   }