bar: use loader instead of swipeview

Also properly set it up
Make network reloadable cause getting is pretty slow

modules/bar/Bar.qml

@@ -1,11 +1,7 @@
 import "root:/widgets"
 import "root:/config"
-import "components"
-import "components/workspaces"
 import Quickshell
-import Quickshell.Wayland
 import QtQuick
-import QtQuick.Controls
 
 Variants {
     model: Quickshell.screens
@@ -41,11 +37,64 @@ Variants {
         //     }
         // }
 
-        SwipeView {
+        Preset {
-            anchors.fill: parent
+            presetName: "pills"
-            currentIndex: 1
 
             Pills {}
         }
     }
+
+    component Preset: Loader {
+        id: loader
+
+        required property string presetName
+
+        anchors.fill: parent
+        asynchronous: true
+        active: false
+        opacity: 0
+
+        states: [
+            State {
+                name: "visible"
+                when: BarConfig.preset.name === loader.presetName
+
+                PropertyChanges {
+                    loader.opacity: 1
+                    loader.active: true
+                }
+            }
+        ]
+
+        transitions: [
+            Transition {
+                from: ""
+                to: "visible"
+
+                SequentialAnimation {
+                    PropertyAction {}
+                    NumberAnimation {
+                        property: "opacity"
+                        duration: Appearance.anim.durations.large
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
+            },
+            Transition {
+                from: "visible"
+                to: ""
+
+                SequentialAnimation {
+                    NumberAnimation {
+                        property: "opacity"
+                        duration: Appearance.anim.durations.large
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                    PropertyAction {}
+                }
+            }
+        ]
+    }
 }

modules/bar/Pills.qml

@@ -8,104 +8,102 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-Item {
+BoxLayout {
-    BoxLayout {
+    id: root
-        id: root
 
-        function get(horiz, vert) {
+    function get(horiz, vert) {
-            return BarConfig.vertical ? vert : horiz;
+        return BarConfig.vertical ? vert : horiz;
+    }
+
+    spacing: Appearance.padding.large
+
+    anchors.fill: parent
+    anchors.leftMargin: get(BarConfig.sizes.floatingGapLarge, BarConfig.sizes.floatingGap)
+    anchors.topMargin: get(BarConfig.sizes.floatingGap, BarConfig.sizes.floatingGapLarge)
+    anchors.rightMargin: get(BarConfig.sizes.floatingGapLarge, 0)
+    anchors.bottomMargin: get(0, BarConfig.sizes.floatingGapLarge)
+
+    Pill {
+        OsIcon {
+            id: osIcon
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
         }
 
-        spacing: Appearance.padding.large
+        Workspaces {
+            vertical: BarConfig.vertical
 
-        anchors.fill: parent
+            anchors.left: root.get(osIcon.right, undefined)
-        anchors.leftMargin: get(BarConfig.sizes.floatingGapLarge, BarConfig.sizes.floatingGap)
+            anchors.leftMargin: root.get(Appearance.padding.large, 0)
-        anchors.topMargin: get(BarConfig.sizes.floatingGap, BarConfig.sizes.floatingGapLarge)
+            anchors.top: root.get(undefined, osIcon.bottom)
-        anchors.rightMargin: get(BarConfig.sizes.floatingGapLarge, 0)
+            anchors.topMargin: root.get(0, Appearance.padding.large)
-        anchors.bottomMargin: get(0, BarConfig.sizes.floatingGapLarge)
 
-        Pill {
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-            OsIcon {
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-                id: osIcon
+        }
+    }
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+    Item {
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        Layout.fillWidth: true
-            }
+        Layout.fillHeight: true
+    }
 
-            Workspaces {
+    Pill {
-                vertical: BarConfig.vertical
+        ActiveWindow {
+            vertical: BarConfig.vertical
 
-                anchors.left: root.get(osIcon.right, undefined)
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.leftMargin: root.get(Appearance.padding.large, 0)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-                anchors.top: root.get(undefined, osIcon.bottom)
+        }
-                anchors.topMargin: root.get(0, Appearance.padding.large)
+    }
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+    Item {
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        Layout.fillWidth: true
-            }
+        Layout.fillHeight: true
+    }
+
+    Pill {
+        Tray {
+            vertical: BarConfig.vertical
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        }
+    }
+
+    Pill {
+        Clock {
+            id: clock
+
+            vertical: BarConfig.vertical
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
         }
 
-        Item {
+        StatusIcons {
-            Layout.fillWidth: true
+            anchors.left: root.get(clock.right, undefined)
-            Layout.fillHeight: true
+            anchors.leftMargin: root.get(Appearance.padding.large, 0)
+            anchors.top: root.get(undefined, clock.bottom)
+            anchors.topMargin: root.get(0, Appearance.padding.large)
+
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
         }
+    }
 
-        Pill {
+    Pill {
-            ActiveWindow {
+        // Make circle
-                vertical: BarConfig.vertical
+        Layout.maximumWidth: BarConfig.sizes.height
+        Layout.maximumHeight: BarConfig.sizes.height
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+        Power {
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+            // Center in pill
-            }
+            x: (BarConfig.sizes.height - width) / 2
-        }
 
-        Item {
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-            Layout.fillWidth: true
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            Layout.fillHeight: true
-        }
-
-        Pill {
-            Tray {
-                vertical: BarConfig.vertical
-
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
-        }
-
-        Pill {
-            Clock {
-                id: clock
-
-                vertical: BarConfig.vertical
-
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
-
-            StatusIcons {
-                anchors.left: root.get(clock.right, undefined)
-                anchors.leftMargin: root.get(Appearance.padding.large, 0)
-                anchors.top: root.get(undefined, clock.bottom)
-                anchors.topMargin: root.get(0, Appearance.padding.large)
-
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
-        }
-
-        Pill {
-            // Make circle
-            Layout.maximumWidth: BarConfig.sizes.height
-            Layout.maximumHeight: BarConfig.sizes.height
-
-            Power {
-                // Center in pill
-                x: (BarConfig.sizes.height - width) / 2
-
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
         }
     }
 

modules/bar/components/workspaces/Workspace.qml

@@ -49,7 +49,7 @@ Item {
 
         Repeater {
             model: ScriptModel {
-                values: Hyprland.clients.filter(c => c.workspace.id === root.ws)
+                values: Hyprland.clients.filter(c => c.workspace?.id === root.ws)
             }
 
             MaterialIcon {

services/Network.qml

@@ -11,6 +11,8 @@ Singleton {
         active: true
     }
 
+    reloadableId: "network"
+
     Process {
         running: true
         command: ["nmcli", "m"]