diff --git a/components/images/FadeImage.qml b/components/images/FadeImage.qml index ebbb9ab6..a397863b 100644 --- a/components/images/FadeImage.qml +++ b/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) { - opacityInAnim.type = hadPrevious ? Anim.DefaultEffects : Anim.StandardLarge; + if (!preventInit && !opacityInAnim.running && status === Image.Ready) { + 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 diff --git a/modules/nexus/pages/WallpaperAndStyle.qml b/modules/nexus/pages/WallpaperAndStyle.qml index 4606265d..7011963a 100644 --- a/modules/nexus/pages/WallpaperAndStyle.qml +++ b/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 - fillMode: Image.PreserveAspectCrop - sourceSize: { - const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1; - return Qt.size(width * dpr, height * dpr); - } + preventInit: wallIndicatorLoader.opacity > 0 + fadeOutAnim: Anim.DefaultEffects + fadeInAnim: Anim.SlowEffects - retainWhileLoading: true - opacity: status === Image.Ready ? 1 : 0 + onSourceChanged: wallLoadDebounceTimer.restart() - Behavior on opacity { - Anim { - type: Anim.SlowEffects + onStatusChanged: { + if (status === Image.Ready) { + wallLoadDebounceTimer.stop(); + wallIndicatorLoader.opacity = 0; } } }