Revert "activewindow: use loader"

This reverts commit 9f3d3d8f216db72269dd59f002d4d23dd21dc75b.

1 files changed, 60 insertions, 31 deletions

diff --git a/bar/ActiveWindow.qml b/bar/ActiveWindow.qml
index 2665569..dff75be 100644
--- a/bar/ActiveWindow.qml
+++ b/bar/ActiveWindow.qml
@@ -3,25 +3,28 @@ 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
 
-    implicitWidth: activated ? loader.item.implicitWidth + General.rectMargin * 4 : 0
-    implicitHeight: loader.item.implicitHeight + General.rectMargin * 2
+    // use IRect
+    implicitWidth: activated ? rowLayout.implicitWidth + General.rectMargin * 4 : 0
+    implicitHeight: rowLayout.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) {
@@ -32,40 +35,42 @@ Rectangle {
         return out?.trim() || s;
     }
 
-    Loader {
-        id: loader
-        active: activated
+    RowLayout {
+        id: rowLayout
         anchors.centerIn: parent
-        sourceComponent: rowComponent
-    }
+        spacing: Bar.resourceIconTextSpacing
 
-    Component {
-        id: rowComponent
-        RowLayout {
-            spacing: Bar.resourceIconTextSpacing
+        IconImage {
+            id: icon
+            source: root.icon
+            implicitWidth: Bar.appIconSize
+            implicitHeight: Bar.appIconSize
 
-            IconImage {
-                id: icon
-                source: root.icon
-                implicitWidth: Bar.appIconSize
-                implicitHeight: Bar.appIconSize
+            // 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) || ""
 
-            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
+                }
             }
         }
     }
 
-    onIconChanged: {
-        if (loader.item) {
-            loader.item.icon.opacity = 0;
-            loader.item.icon.source = root.icon;
-            loader.item.icon.opacity = 1;
-        }
-    }
+    onIconChanged: fadeIcon.start()
 
     Behavior on opacity {
         NumberAnimation {
@@ -79,4 +84,28 @@ 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
+        }
+    }
 }