From 186fb315dcc40454320363b230bf1847d2bfc464 Mon Sep 17 00:00:00 2001
From: Quadbyte <studio@quadbyte.net>
Date: Sun, 3 Aug 2025 11:12:07 -0400
Subject: [PATCH] WallPaperPanel/Selector: added LazyLoader and a smooth
 animation to reveal images once loaded (#78)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Atoch <sebastien@atracktiv.com>
---
 Widgets/Sidebar/Panel/PanelPopup.qml     | 41 ++++++++++++------------
 Widgets/Sidebar/Panel/WallpaperPanel.qml | 17 ++++++++--
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/Widgets/Sidebar/Panel/PanelPopup.qml b/Widgets/Sidebar/Panel/PanelPopup.qml
index a656072..1a68a23 100644
--- a/Widgets/Sidebar/Panel/PanelPopup.qml
+++ b/Widgets/Sidebar/Panel/PanelPopup.qml
@@ -59,15 +59,15 @@ PanelWithOverlay {
             if (sidebarPopupRect.settingsModal && sidebarPopupRect.settingsModal.visible) {
                 sidebarPopupRect.settingsModal.visible = false;
             }
-            if (sidebarPopupRect.wallpaperPanelModal && sidebarPopupRect.wallpaperPanelModal.visible) {
-                sidebarPopupRect.wallpaperPanelModal.visible = false;
+            if (wallpaperPanelLoader && wallpaperPanelLoader.active) {
+                wallpaperPanelLoader.active = false;
+            }
+            if (sidebarPopupRect.wifiPanelModal && sidebarPopupRect.wifiPanelModal.visible) {
+                sidebarPopupRect.wifiPanelModal.visible = false;
+            }
+            if (sidebarPopupRect.bluetoothPanelModal && sidebarPopupRect.bluetoothPanelModal.visible) {
+                sidebarPopupRect.bluetoothPanelModal.visible = false;
             }
-                if (sidebarPopupRect.wifiPanelModal && sidebarPopupRect.wifiPanelModal.visible) {
-                    sidebarPopupRect.wifiPanelModal.visible = false;
-                }
-                if (sidebarPopupRect.bluetoothPanelModal && sidebarPopupRect.bluetoothPanelModal.visible) {
-                    sidebarPopupRect.bluetoothPanelModal.visible = false;
-                }
             if (sidebarPopup.visible) {
                 slideAnim.from = 0;
                 slideAnim.to = width;
@@ -125,7 +125,6 @@ PanelWithOverlay {
         }
 
         property alias settingsModal: settingsModal
-        property alias wallpaperPanelModal: wallpaperPanelModal
         property alias wifiPanelModal: wifiPanel.panel
         property alias bluetoothPanelModal: bluetoothPanel.panel
         SettingsModal {
@@ -313,9 +312,7 @@ PanelWithOverlay {
                     onSettingsRequested: {
                         settingsModal.visible = true;
                     }
-                    onWallpaperRequested: {
-                        wallpaperPanelModal.visible = true;
-                    }
+                    onWallpaperRequested: wallpaperPanelLoader.active = true;
                 }
             }
             Keys.onEscapePressed: sidebarPopupRect.hidePopup()
@@ -402,16 +399,20 @@ PanelWithOverlay {
             }
         }
 
-        WallpaperPanel {
-            id: wallpaperPanelModal
-            visible: false
-            Component.onCompleted: {
-                if (parent) {
-                    wallpaperPanelModal.anchors.top = parent.top;
-                    wallpaperPanelModal.anchors.right = parent.right;
+        LazyLoader {
+            id: wallpaperPanelLoader
+            loading: false
+
+            WallpaperPanel {
+                // Need to keep this visible so it shows once loaded
+                visible: true
+                Component.onCompleted: {
+                    if (parent) {
+                        anchors.top = parent.top;
+                        anchors.right = parent.right;
+                    }
                 }
             }
-            // Add a close button inside WallpaperPanel.qml for user to close the modal
         }
     }
 }
diff --git a/Widgets/Sidebar/Panel/WallpaperPanel.qml b/Widgets/Sidebar/Panel/WallpaperPanel.qml
index 3747452..53361ca 100644
--- a/Widgets/Sidebar/Panel/WallpaperPanel.qml
+++ b/Widgets/Sidebar/Panel/WallpaperPanel.qml
@@ -30,7 +30,7 @@ PanelWindow {
     }
 
     onVisibleChanged: {
-        if (wallpaperPanelModal.visible) {
+        if (wallpaperPanelLoader.active) {
             wallpapers = WallpaperManager.wallpaperList
         } else {
             wallpapers = []
@@ -81,7 +81,7 @@ PanelWindow {
                         id: closeButtonArea
                         anchors.fill: parent
                         hoverEnabled: true
-                        onClicked: wallpaperPanelModal.visible = false
+                        onClicked: wallpaperPanelLoader.active = false;
                         cursorShape: Qt.PointingHandCursor
                     }
                 }
@@ -136,13 +136,24 @@ PanelWindow {
                                     source: modelData
                                     fillMode: Image.PreserveAspectCrop
                                     asynchronous: true
-                                    cache: true
+                                    cache: false
                                     smooth: true
                                     mipmap: true
                                     // Limit memory usage
                                     sourceSize.width: 480
                                     sourceSize.height: 270
                                 }
+                                Rectangle {
+                                    anchors.fill: parent
+                                    color: Theme.textPrimary
+                                    opacity: (wallpaperImage.status == Image.Ready) ? 0.0 : 1.0
+                                    Behavior on opacity {
+                                        NumberAnimation {
+                                            duration: 500
+                                            easing.type: Easing.OutCubic
+                                        }
+                                    }
+                                }
                                 MouseArea {
                                     anchors.fill: parent
                                     hoverEnabled: true