activewindow: use loader

1 files changed, 31 insertions, 60 deletions

diff --git a/bar/ActiveWindow.qml b/bar/ActiveWindow.qml
index dff75be..2665569 100644
--- a/bar/ActiveWindow.qml
+++ b/bar/ActiveWindow.qml
@@ -3,28 +3,25 @@ import QtQuick.Layouts
 import Quickshell
 import Quickshell.Wayland
 import Quickshell.Widgets
+
 import qs.components
 import qs.config
 
-// TODO use a item wrapping loader for opacity Behavior
 Rectangle {
     id: root
-    // hyprland toplevel isn't shown immediately...
+
     property var toplevel: ToplevelManager.activeToplevel
     property var icon: Quickshell.iconPath(AppSearch.guessIcon(toplevel?.appId), "image-missing")
-
+    // according to docs, null could happen but doesn't seem to happen in practice so..
+    // hypr toplevel.activated is always true and doesn't change either so..
     property var activated: toplevel?.activated || false
 
-    // use IRect
-    implicitWidth: activated ? rowLayout.implicitWidth + General.rectMargin * 4 : 0
-    implicitHeight: rowLayout.implicitHeight + General.rectMargin * 2
+    implicitWidth: activated ? loader.item.implicitWidth + General.rectMargin * 4 : 0
+    implicitHeight: loader.item.implicitHeight + General.rectMargin * 2
     anchors.centerIn: parent
 
     color: WallustColors.color4
-    // according to docs, null could happen but doesn't seem to happen in practice so..
-    // hypr toplevel.activated is always true and doesn't change either so..
     opacity: activated ? 1 : 0
-
     radius: Style.rounding.smaller
 
     function strip(s) {
@@ -35,42 +32,40 @@ Rectangle {
         return out?.trim() || s;
     }
 
-    RowLayout {
-        id: rowLayout
+    Loader {
+        id: loader
+        active: activated
         anchors.centerIn: parent
-        spacing: Bar.resourceIconTextSpacing
+        sourceComponent: rowComponent
+    }
 
-        IconImage {
-            id: icon
-            source: root.icon
-            implicitWidth: Bar.appIconSize
-            implicitHeight: Bar.appIconSize
+    Component {
+        id: rowComponent
+        RowLayout {
+            spacing: Bar.resourceIconTextSpacing
 
-            // sync animation
-            opacity: root.activated ? 1 : 0
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: General.animateDuration / 4
-                }
+            IconImage {
+                id: icon
+                source: root.icon
+                implicitWidth: Bar.appIconSize
+                implicitHeight: Bar.appIconSize
             }
-        }
-
-        IText {
-            animate: true
-            font.pixelSize: General.fontSize
-            text: strip(root?.toplevel?.title) || ""
 
-            // sync animation
-            opacity: root.activated ? 1 : 0
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: General.animateDuration / 4
-                }
+            IText {
+                animate: true
+                font.pixelSize: General.fontSize
+                text: strip(root?.toplevel?.title) || ""
             }
         }
     }
 
-    onIconChanged: fadeIcon.start()
+    onIconChanged: {
+        if (loader.item) {
+            loader.item.icon.opacity = 0;
+            loader.item.icon.source = root.icon;
+            loader.item.icon.opacity = 1;
+        }
+    }
 
     Behavior on opacity {
         NumberAnimation {
@@ -84,28 +79,4 @@ Rectangle {
             damping: General.springAnimationDamping * 1.3
         }
     }
-
-    SequentialAnimation {
-        id: fadeIcon
-        running: false
-
-        PropertyAnimation {
-            target: icon
-            property: "opacity"
-            to: 0
-            duration: General.animateDuration / 4
-        }
-        ScriptAction {
-            script: icon.source = root.icon
-        }
-        PropertyAnimation {
-            target: icon
-            property: "opacity"
-            to: 1
-            duration: General.animateDuration / 4
-        }
-        ScriptAction {
-            script: icon.source = root.icon
-        }
-    }
 }