use loader pattern in control center

Modules/ControlCenter/AudioTab.qml

@@ -33,11 +33,14 @@ Item {
       }
     }
 
-    // Output Tab - DankFlickable
+    // Output Tab - Loader
-    DankFlickable {
+    Loader {
       width: parent.width
       height: parent.height - 48
-      visible: audioTab.audioSubTab === 0
+      active: audioTab.audioSubTab === 0
+      asynchronous: true
+      sourceComponent: Component {
+        DankFlickable {
           clip: true
           contentHeight: outputColumn.height
           contentWidth: width
@@ -58,12 +61,17 @@ Item {
             }
           }
         }
+      }
+    }
 
-    // Input Tab - DankFlickable
+    // Input Tab - Loader
-    DankFlickable {
+    Loader {
       width: parent.width
       height: parent.height - 48
-      visible: audioTab.audioSubTab === 1
+      active: audioTab.audioSubTab === 1
+      asynchronous: true
+      sourceComponent: Component {
+        DankFlickable {
           clip: true
           contentHeight: inputColumn.height
           contentWidth: width
@@ -85,6 +93,8 @@ Item {
           }
         }
       }
+    }
+  }
 
   // Volume Control Component
   Component {

Modules/ControlCenter/ControlCenterPopout.qml

@@ -719,102 +719,43 @@ PanelWindow {
                                 Theme.outline.b, 0.05)
           border.width: 1
 
-          NetworkTab {
+          Loader {
             anchors.fill: parent
             anchors.margins: Theme.spacingS
-            visible: root.currentTab === "network"
+            active: root.currentTab === "network"
+            asynchronous: true
+            sourceComponent: Component {
+              NetworkTab {}
+            }
           }
 
-          AudioTab {
+          Loader {
             anchors.fill: parent
             anchors.margins: Theme.spacingS
-            visible: root.currentTab === "audio"
+            active: root.currentTab === "audio"
+            asynchronous: true
+            sourceComponent: Component {
+              AudioTab {}
+            }
           }
 
-          BluetoothTab {
+          Loader {
             anchors.fill: parent
             anchors.margins: Theme.spacingS
-            visible: BluetoothService.available
+            active: BluetoothService.available && root.currentTab === "bluetooth"
-                     && root.currentTab === "bluetooth"
+            asynchronous: true
-          }
+            sourceComponent: Component {
-
+              BluetoothTab {}
-          Column {
-            property var brightnessDebounceTimer
-
-            brightnessDebounceTimer: Timer {
-              property int pendingValue: 0
-
-              interval: BrightnessService.ddcAvailable ? 500 : 50
-              repeat: false
-              onTriggered: {
-                BrightnessService.setBrightnessInternal(pendingValue)
             }
           }
 
+          Loader {
             anchors.fill: parent
             anchors.margins: Theme.spacingS
-            visible: root.currentTab === "display"
+            active: root.currentTab === "display"
-            spacing: Theme.spacingL
+            asynchronous: true
-            Column {
+            sourceComponent: Component {
-              width: parent.width
+              DisplayTab {}
-              spacing: Theme.spacingS
-              visible: BrightnessService.brightnessAvailable
-
-              StyledText {
-                text: "Brightness"
-                font.pixelSize: Theme.fontSizeMedium
-                color: Theme.surfaceText
-                font.weight: Font.Medium
-              }
-
-              DankSlider {
-                width: parent.width
-                height: 24
-                value: BrightnessService.brightnessLevel
-                leftIcon: "brightness_low"
-                rightIcon: "brightness_high"
-                enabled: BrightnessService.brightnessAvailable
-                showValue: true
-                onSliderValueChanged: function (newValue) {
-                  parent.parent.brightnessDebounceTimer.pendingValue = newValue
-                  parent.parent.brightnessDebounceTimer.restart()
-                }
-                onSliderDragFinished: function (finalValue) {
-                  parent.parent.brightnessDebounceTimer.stop()
-                  BrightnessService.setBrightnessInternal(finalValue)
-                }
-              }
-
-              StyledText {
-                text: "ddc changes can be slow to respond"
-                font.pixelSize: Theme.fontSizeSmall
-                color: Theme.surfaceVariantText
-                visible: BrightnessService.ddcAvailable
-                         && !BrightnessService.laptopBacklightAvailable
-                anchors.horizontalCenter: parent.horizontalCenter
-              }
-            }
-
-            DankToggle {
-              width: parent.width
-              text: "Night Mode"
-              description: "Apply warm color temperature to reduce eye strain"
-              checked: SettingsData.nightModeEnabled
-              onToggled: checked => {
-                           SettingsData.setNightModeEnabled(checked)
-                         }
-            }
-
-            DankToggle {
-              width: parent.width
-              text: "Light Mode"
-              description: "Use light theme instead of dark theme"
-              checked: SessionData.isLightMode
-              onToggled: checked => {
-                           SessionData.setLightMode(checked)
-                           Theme.isLightMode = checked
-                           PortalService.setLightMode(checked)
-                         }
             }
           }
 

Modules/TopBar/TopBar.qml

@@ -371,6 +371,7 @@ PanelWindow {
                                 active: topBarContent.getWidgetVisible(model.widgetId)
                                 sourceComponent: topBarContent.getWidgetComponent(model.widgetId)
                                 opacity: topBarContent.getWidgetEnabled(model.enabled) ? 1 : 0
+                                asynchronous: true
                             }
                         }
                     }
@@ -491,6 +492,8 @@ PanelWindow {
                                 active: topBarContent.getWidgetVisible(model.widgetId)
                                 sourceComponent: topBarContent.getWidgetComponent(model.widgetId)
                                 opacity: topBarContent.getWidgetEnabled(model.enabled) ? 1 : 0
+                                asynchronous: true
+                                
                                 onLoaded: {
                                     if (item) {
                                         item.onWidthChanged.connect(centerSection.updateLayout)
@@ -498,7 +501,6 @@ PanelWindow {
                                             item.spacerSize = Qt.binding(() => {
                                                 return model.size || 20
                                             })
-
                                         Qt.callLater(centerSection.updateLayout)
                                     }
                                 }
@@ -537,6 +539,48 @@ PanelWindow {
                                 active: topBarContent.getWidgetVisible(model.widgetId)
                                 sourceComponent: topBarContent.getWidgetComponent(model.widgetId)
                                 opacity: topBarContent.getWidgetEnabled(model.enabled) ? 1 : 0
+                                asynchronous: true
+                            }
+                        }
+                    }
+
+
+                    Component {
+                        id: clipboardComponent
+
+                        Rectangle {
+                            width: 40
+                            height: 30
+                            radius: Theme.cornerRadius
+                            color: {
+                                const baseColor = clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover
+                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
+                                               baseColor.a * Theme.widgetTransparency)
+                            }
+
+                            DankIcon {
+                                anchors.centerIn: parent
+                                name: "content_paste"
+                                size: Theme.iconSize - 6
+                                color: Theme.surfaceText
+                            }
+
+                            MouseArea {
+                                id: clipboardArea
+
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: {
+                                    clipboardHistoryModalPopup.toggle()
+                                }
+                            }
+
+                            Behavior on color {
+                                ColorAnimation {
+                                    duration: Theme.shortDuration
+                                    easing.type: Theme.standardEasing
+                                }
                             }
                         }
                     }
@@ -547,7 +591,6 @@ PanelWindow {
                         LauncherButton {
                             isActive: appDrawerPopout ? appDrawerPopout.isVisible : false
                             section: {
-                                // Determine which section this loader is in by checking parent
                                 if (parent && parent.parent) {
                                     if (parent.parent === leftSection)
                                         return "left"
@@ -556,7 +599,7 @@ PanelWindow {
                                     if (parent.parent === centerSection)
                                         return "center"
                                 }
-                                return "left" // default fallback
+                                return "left"
                             }
                             popupTarget: appDrawerPopout
                             parentScreen: root.screen
@@ -675,46 +718,6 @@ PanelWindow {
                         }
                     }
 
-                    Component {
-                        id: clipboardComponent
-
-                        Rectangle {
-                            width: 40
-                            height: 30
-                            radius: Theme.cornerRadius
-                            color: {
-                                const baseColor = clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover
-                                return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
-                                               baseColor.a * Theme.widgetTransparency)
-                            }
-
-                            DankIcon {
-                                anchors.centerIn: parent
-                                name: "content_paste"
-                                size: Theme.iconSize - 6
-                                color: Theme.surfaceText
-                            }
-
-                            MouseArea {
-                                id: clipboardArea
-
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
-                                onClicked: {
-                                    clipboardHistoryModalPopup.toggle()
-                                }
-                            }
-
-                            Behavior on color {
-                                ColorAnimation {
-                                    duration: Theme.shortDuration
-                                    easing.type: Theme.standardEasing
-                                }
-                            }
-                        }
-                    }
-
                     Component {
                         id: cpuUsageComponent