From 3d408b18f7c54572540bd00a1b03061a8a4ec928 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Fri, 8 Aug 2025 18:31:52 +0700
Subject: [PATCH] background: add fade when switching

---
 .../quickshell/ii/modules/background/Background.qml  |  6 +++++-
 .../ii/modules/sidebarLeft/anime/BooruImage.qml      | 12 ++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/.config/quickshell/ii/modules/background/Background.qml b/.config/quickshell/ii/modules/background/Background.qml
index 84f99fe41..2eb5c3ec7 100644
--- a/.config/quickshell/ii/modules/background/Background.qml
+++ b/.config/quickshell/ii/modules/background/Background.qml
@@ -148,7 +148,11 @@ Variants {
         // Wallpaper
         Image {
             id: wallpaper
-            visible: !bgRoot.wallpaperIsVideo
+            visible: opacity > 0
+            opacity: (status === Image.Ready && !bgRoot.wallpaperIsVideo) ? 1 : 0
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+            }
             property real value // 0 to 1, for offset
             asynchronous: true
             value: {
diff --git a/.config/quickshell/ii/modules/sidebarLeft/anime/BooruImage.qml b/.config/quickshell/ii/modules/sidebarLeft/anime/BooruImage.qml
index cf412f274..b2eef2939 100644
--- a/.config/quickshell/ii/modules/sidebarLeft/anime/BooruImage.qml
+++ b/.config/quickshell/ii/modules/sidebarLeft/anime/BooruImage.qml
@@ -63,13 +63,17 @@ Button {
             anchors.fill: parent
             width: root.rowHeight * modelData.aspect_ratio
             height: root.rowHeight
-            visible: opacity > 0
-            opacity: status === Image.Ready ? 1 : 0
             fillMode: Image.PreserveAspectFit
             source: modelData.preview_url
             sourceSize.width: root.rowHeight * modelData.aspect_ratio
             sourceSize.height: root.rowHeight
 
+            visible: opacity > 0
+            opacity: status === Image.Ready ? 1 : 0
+            Behavior on opacity {
+                animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
+            }
+
             layer.enabled: true
             layer.effect: OpacityMask {
                 maskSource: Rectangle {
@@ -78,10 +82,6 @@ Button {
                     radius: imageRadius
                 }
             }
-
-            Behavior on opacity {
-                animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
-            }
         }
 
         RippleButton {