bar: use loader instead of swipeview

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

3 files changed, 127 insertions, 80 deletions

diff --git a/modules/bar/Bar.qml b/modules/bar/Bar.qml
index 7608d49..5a2940f 100644
--- a/modules/bar/Bar.qml
+++ b/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 {
-            anchors.fill: parent
-            currentIndex: 1
+        Preset {
+            presetName: "pills"
 
             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 {}
+                }
+            }
+        ]
+    }
 }
diff --git a/modules/bar/Pills.qml b/modules/bar/Pills.qml
index 05b29a9..49dbe5b 100644
--- a/modules/bar/Pills.qml
+++ b/modules/bar/Pills.qml
@@ -8,104 +8,102 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-Item {
-    BoxLayout {
-        id: root
+BoxLayout {
+    id: root
 
-        function get(horiz, vert) {
-            return BarConfig.vertical ? vert : horiz;
-        }
+    function get(horiz, vert) {
+        return BarConfig.vertical ? vert : horiz;
+    }
 
-        spacing: Appearance.padding.large
+    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)
+    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
+    Pill {
+        OsIcon {
+            id: osIcon
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+        }
 
-            Workspaces {
-                vertical: BarConfig.vertical
+        Workspaces {
+            vertical: BarConfig.vertical
 
-                anchors.left: root.get(osIcon.right, undefined)
-                anchors.leftMargin: root.get(Appearance.padding.large, 0)
-                anchors.top: root.get(undefined, osIcon.bottom)
-                anchors.topMargin: root.get(0, Appearance.padding.large)
+            anchors.left: root.get(osIcon.right, undefined)
+            anchors.leftMargin: root.get(Appearance.padding.large, 0)
+            anchors.top: root.get(undefined, osIcon.bottom)
+            anchors.topMargin: root.get(0, Appearance.padding.large)
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
         }
+    }
 
-        Item {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
+    Item {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+    }
 
-        Pill {
-            ActiveWindow {
-                vertical: BarConfig.vertical
+    Pill {
+        ActiveWindow {
+            vertical: BarConfig.vertical
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
         }
+    }
 
-        Item {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
+    Item {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+    }
 
-        Pill {
-            Tray {
-                vertical: BarConfig.vertical
+    Pill {
+        Tray {
+            vertical: BarConfig.vertical
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
         }
+    }
 
-        Pill {
-            Clock {
-                id: clock
+    Pill {
+        Clock {
+            id: clock
 
-                vertical: BarConfig.vertical
+            vertical: BarConfig.vertical
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
+            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)
+        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)
-            }
+            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
+    Pill {
+        // Make circle
+        Layout.maximumWidth: BarConfig.sizes.height
+        Layout.maximumHeight: BarConfig.sizes.height
 
-            Power {
-                // Center in pill
-                x: (BarConfig.sizes.height - width) / 2
+        Power {
+            // Center in pill
+            x: (BarConfig.sizes.height - width) / 2
 
-                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
-                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
-            }
+            anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+            anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
         }
     }
 
diff --git a/modules/bar/components/workspaces/Workspace.qml b/modules/bar/components/workspaces/Workspace.qml
index e069565..2e30169 100644
--- a/modules/bar/components/workspaces/Workspace.qml
+++ b/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 {