fix: animate nexus wallpaper preview

components/images/FadeImage.qml

@@ -6,10 +6,15 @@ Image {
     id: root
 
     property bool hadPrevious
+    property bool fadingOut
+    property bool preventInit
+    property int fadeOutAnim: Anim.FastEffects
+    property int fadeInAnim: Anim.DefaultEffects
+    property int fadeInLargeAnim: Anim.StandardLarge
 
     function maybeStartInAnim(): void {
-        if (!opacityInAnim.running && status === Image.Ready) {
+        if (!preventInit && !opacityInAnim.running && status === Image.Ready) {
-            opacityInAnim.type = hadPrevious ? Anim.DefaultEffects : Anim.StandardLarge;
+            opacityInAnim.type = hadPrevious ? fadeInAnim : fadeInLargeAnim;
             opacityInAnim.start();
         }
     }
@@ -26,6 +31,7 @@ Image {
     opacity: 0
 
     onStatusChanged: maybeStartInAnim()
+    onPreventInitChanged: maybeStartInAnim()
 
     Anim on opacity {
         id: opacityInAnim
@@ -36,11 +42,24 @@ Image {
 
     Behavior on source {
         SequentialAnimation {
+            ScriptAction {
+                script: opacityInAnim.stop()
+            }
+            PropertyAction {
+                target: root
+                property: "fadingOut"
+                value: true
+            }
             Anim {
                 target: root
                 property: "opacity"
                 to: 0
-                type: Anim.FastEffects
+                type: root.fadeOutAnim
+            }
+            PropertyAction {
+                target: root
+                property: "fadingOut"
+                value: false
             }
             PropertyAction {
                 target: root

modules/nexus/pages/WallpaperAndStyle.qml

@@ -7,6 +7,7 @@ import Caelestia.Components
 import Caelestia.Config
 import qs.components
 import qs.components.controls
+import qs.components.images
 import qs.services
 import qs.modules.nexus
 import qs.modules.nexus.common
@@ -43,9 +44,11 @@ ColumnLayout {
         radius: Tokens.rounding.large
 
         Loader {
+            id: wallIndicatorLoader
+
             anchors.centerIn: parent
 
-            opacity: wallImg.status === Image.Ready ? 0 : 1
+            opacity: 0
             active: opacity > 0
 
             sourceComponent: StyledRect {
@@ -60,7 +63,7 @@ ColumnLayout {
 
                     anchors.centerIn: parent
                     containsIcon: true
-                    implicitSize: wallWrapper.implicitHeight * 0.4
+                    implicitSize: Math.min(wallWrapper.implicitWidth, wallWrapper.implicitHeight) * 0.4
                 }
             }
 
@@ -71,24 +74,31 @@ ColumnLayout {
             }
         }
 
-        Image {
+        Timer {
+            id: wallLoadDebounceTimer
+
+            interval: 100
+            onTriggered: {
+                if (wallImg.status !== Image.Ready)
+                    wallIndicatorLoader.opacity = 1;
+            }
+        }
+
+        FadeImage {
             id: wallImg
 
             anchors.fill: parent
             source: Wallpapers.current
-            asynchronous: true
+            preventInit: wallIndicatorLoader.opacity > 0
-            fillMode: Image.PreserveAspectCrop
+            fadeOutAnim: Anim.DefaultEffects
-            sourceSize: {
+            fadeInAnim: Anim.SlowEffects
-                const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
-                return Qt.size(width * dpr, height * dpr);
-            }
 
-            retainWhileLoading: true
+            onSourceChanged: wallLoadDebounceTimer.restart()
-            opacity: status === Image.Ready ? 1 : 0
 
-            Behavior on opacity {
+            onStatusChanged: {
-                Anim {
+                if (status === Image.Ready) {
-                    type: Anim.SlowEffects
+                    wallLoadDebounceTimer.stop();
+                    wallIndicatorLoader.opacity = 0;
                 }
             }
         }