qs: numerous performance optimizations

- ClippingRectangle usages
- Asynchronous loader usages
- Replace cava visualizers with shaders

quickshell/Modules/DankDash/DankDashPopout.qml

@@ -411,6 +411,7 @@ DankPopout {
                         anchors.fill: parent
                         active: root.currentTabId === "media"
                         visible: active
+                        asynchronous: true
                         sourceComponent: Component {
                             MediaPlayerTab {
                                 targetScreen: root.screen
@@ -462,7 +463,7 @@ DankPopout {
                     DankSpinner {
                         anchors.centerIn: parent
                         size: 40
-                        visible: wallpaperLoader.active && wallpaperLoader.status === Loader.Loading
+                        visible: (wallpaperLoader.active && wallpaperLoader.status === Loader.Loading) || (mediaLoader.active && mediaLoader.status === Loader.Loading) || (weatherLoader.active && weatherLoader.status === Loader.Loading)
                     }
 
                     Loader {
@@ -470,6 +471,7 @@ DankPopout {
                         anchors.fill: parent
                         active: root.currentTabId === "weather"
                         visible: active
+                        asynchronous: true
                         sourceComponent: Component {
                             WeatherTab {}
                         }

quickshell/Modules/DankDash/MediaDropdownOverlay.qml

@@ -44,6 +44,8 @@ Item {
 
     property int __panelHoverCount: 0
 
+    readonly property bool overlayBlurActive: dropdownBlur.active
+
     onDropdownTypeChanged: {
         if (dropdownType === 0) {
             __panelHoverCount = 0;
@@ -75,8 +77,10 @@ Item {
     }
 
     WindowBlur {
+        id: dropdownBlur
         targetWindow: root.targetWindow
         readonly property bool active: root.__activePanel !== null && root.__activePanel.visible && root.__activePanel.opacity > 0
+        blurEnabled: active && Theme.connectedSurfaceBlurEnabled
         readonly property real s: root.__activePanel ? Math.min(1, root.__activePanel.scale) : 1
         blurX: root.__activePanel ? root.__activePanel.x + root.__activePanel.width * (1 - s) * 0.5 : 0
         blurY: root.__activePanel ? root.__activePanel.y + root.__activePanel.height * (1 - s) * 0.5 : 0

quickshell/Modules/DankDash/MediaPlayerTab.qml

@@ -2,6 +2,7 @@ import QtQuick
 import QtQuick.Effects
 import QtQuick.Layouts
 import Quickshell.Services.Mpris
+import Quickshell.Widgets
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -70,7 +71,7 @@ Item {
     property bool _switchHold: false
     Timer {
         id: _switchHoldTimer
-        interval: 650
+        interval: 1500
         repeat: false
         onTriggered: _switchHold = false
     }
@@ -78,7 +79,8 @@ Item {
     onActivePlayerChanged: {
         if (!activePlayer) {
             isSwitching = false;
-            _switchHold = false;
+            _switchHold = true;
+            _switchHoldTimer.restart();
             return;
         }
         isSwitching = true;
@@ -117,14 +119,10 @@ Item {
     Connections {
         target: MprisController
         function onAvailablePlayersChanged() {
-            const count = (MprisController.availablePlayers?.length || 0);
-            if (count === 0) {
+            if ((MprisController.availablePlayers?.length || 0) === 0)
                 isSwitching = false;
-                _switchHold = false;
-            } else {
-                _switchHold = true;
-                _switchHoldTimer.restart();
-            }
+            _switchHold = true;
+            _switchHoldTimer.restart();
         }
     }
 
@@ -290,34 +288,64 @@ Item {
     Item {
         id: bgContainer
         anchors.fill: parent
-        visible: TrackArtService.resolvedArtUrl !== ""
 
-        Image {
-            id: bgImage
-            anchors.centerIn: parent
-            width: Math.max(parent.width, parent.height) * 1.1
-            height: width
-            source: TrackArtService.resolvedArtUrl
-            fillMode: Image.PreserveAspectCrop
-            asynchronous: true
-            cache: true
-            visible: false
-            onStatusChanged: {
-                if (status === Image.Ready)
-                    maybeFinishSwitch();
-            }
+        readonly property string curArt: TrackArtService.resolvedArtUrl
+        // Two layers crossfade: new art loads into the hidden one and fades in once decoded.
+        property bool _showA: true
+        visible: layerA.ready || layerB.ready
+
+        onCurArtChanged: syncArt()
+        Component.onCompleted: syncArt()
+
+        function syncArt() {
+            if (curArt === "" || layerA.art == curArt || layerB.art == curArt)
+                return;
+            if (_showA)
+                layerB.art = curArt;
+            else
+                layerA.art = curArt;
         }
 
-        Item {
-            id: blurredBg
+        component BgBlurLayer: ClippingRectangle {
+            id: layer
+            property alias art: layerImg.source
+            readonly property bool ready: layerImg.status === Image.Ready && layerImg.source != ""
+            property bool front: false
+            signal loaded
+
             anchors.fill: parent
-            visible: false
+            radius: Theme.cornerRadius
+            color: "transparent"
+            antialiasing: true
+            opacity: front ? 0.7 : 0
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: 350
+                    easing.type: Easing.InOutQuad
+                }
+            }
+
+            Image {
+                id: layerImg
+                anchors.centerIn: parent
+                width: Math.max(parent.width, parent.height) * 1.1
+                height: width
+                fillMode: Image.PreserveAspectCrop
+                asynchronous: true
+                cache: true
+                visible: false
+                onStatusChanged: {
+                    if (status === Image.Ready && source != "")
+                        layer.loaded();
+                }
+            }
 
             MultiEffect {
                 anchors.centerIn: parent
-                width: bgImage.width
-                height: bgImage.height
-                source: bgImage
+                width: layerImg.width
+                height: layerImg.height
+                source: layerImg
                 blurEnabled: true
                 blurMax: 64
                 blur: 0.8
@@ -326,22 +354,26 @@ Item {
             }
         }
 
-        Rectangle {
-            id: bgMask
-            anchors.fill: parent
-            radius: Theme.cornerRadius
-            visible: false
-            layer.enabled: true
+        BgBlurLayer {
+            id: layerA
+            front: bgContainer._showA
+            onLoaded: {
+                if (!bgContainer._showA) {
+                    bgContainer._showA = true;
+                    root.maybeFinishSwitch();
+                }
+            }
         }
 
-        MultiEffect {
-            anchors.fill: parent
-            source: blurredBg
-            maskEnabled: true
-            maskSource: bgMask
-            maskThresholdMin: 0.5
-            maskSpreadAtMin: 1.0
-            opacity: 0.7
+        BgBlurLayer {
+            id: layerB
+            front: !bgContainer._showA
+            onLoaded: {
+                if (bgContainer._showA) {
+                    bgContainer._showA = false;
+                    root.maybeFinishSwitch();
+                }
+            }
         }
 
         Rectangle {
@@ -442,7 +474,8 @@ Item {
                         elide: Text.ElideRight
                         wrapMode: Text.WordWrap
                         maximumLineCount: 1
-                        visible: text.length > 0
+                        // Reserve the line so late album metadata doesn't shift the seekbar.
+                        height: Math.max(implicitHeight, Theme.fontSizeSmall * 1.4)
                     }
                 }
 

quickshell/Modules/DankDash/OverviewTab.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import qs.Common
 import qs.Modules.DankDash.Overview
+import qs.Widgets
 
 Item {
     id: root
@@ -17,7 +18,7 @@ Item {
     signal navFocusRequested
 
     function handleKeyEvent(event) {
-        return calendarCard.handleKeyEvent(event);
+        return calendarLoader.item ? calendarLoader.item.handleKeyEvent(event) : false;
     }
 
     Item {
@@ -57,16 +58,26 @@ Item {
             height: 220
         }
 
-        // Calendar - bottom middle (wider and taller)
-        CalendarOverviewCard {
-            id: calendarCard
+        // Calendar - bottom middle; deferred so the grid stays off the emerge frame.
+        Loader {
+            id: calendarLoader
             x: parent.width * 0.2 - Theme.spacingM
             y: 100 + Theme.spacingM
             width: parent.width * 0.6
             height: 300
+            asynchronous: true
+            sourceComponent: Component {
+                CalendarOverviewCard {
+                    onCloseDash: root.closeDash()
+                    onNavFocusRequested: root.navFocusRequested()
+                }
+            }
 
-            onCloseDash: root.closeDash()
-            onNavFocusRequested: root.navFocusRequested()
+            DankSpinner {
+                anchors.centerIn: parent
+                size: 32
+                visible: calendarLoader.status === Loader.Loading
+            }
         }
 
         // Media - bottom right (narrow and taller)

quickshell/Modules/DankDash/WeatherTab.qml

@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Effects
 import QtQuick.Shapes
 import qs.Common
 import qs.Services
@@ -245,17 +244,6 @@ Item {
                             size: Theme.iconSize * 2
                             color: Theme.primary
                             anchors.verticalCenter: parent.verticalCenter
-
-                            layer.enabled: Theme.elevationEnabled
-                            layer.effect: MultiEffect {
-                                shadowEnabled: Theme.elevationEnabled
-                                shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel1)
-                                shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel1, 1)
-                                shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel1 && Theme.elevationLevel1.blurPx !== undefined ? Theme.elevationLevel1.blurPx : 4) / Theme.elevationBlurMax)) : 0
-                                blurMax: Theme.elevationBlurMax
-                                shadowColor: Theme.elevationShadowColor(Theme.elevationLevel1)
-                                shadowOpacity: Theme.elevationLevel1 && Theme.elevationLevel1.alpha !== undefined ? Theme.elevationLevel1.alpha : 0.2
-                            }
                         }
 
                         Column {
@@ -820,16 +808,6 @@ Item {
                     property var pos: WeatherService.getSkyArcPosition(skyBox.currentDate, false)
                     x: (pos?.h ?? 0) * skyBox.effectiveWidth - (moonPhase.width / 2) + skyBox.hMargin
                     y: (pos?.v ?? 0) * -(skyBox.effectiveHeight / 2) + skyBox.effectiveHeight / 2 - (moonPhase.height / 2) + skyBox.vMargin
-
-                    layer.enabled: Theme.elevationEnabled
-                    layer.effect: MultiEffect {
-                        shadowEnabled: Theme.elevationEnabled
-                        shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel2)
-                        shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel2, 4)
-                        shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
-                        blurMax: Theme.elevationBlurMax
-                        shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
-                    }
                 }
 
                 DankIcon {
@@ -842,16 +820,6 @@ Item {
                     property var pos: WeatherService.getSkyArcPosition(skyBox.currentDate, true)
                     x: (pos?.h ?? 0) * skyBox.effectiveWidth - (sun.width / 2) + skyBox.hMargin
                     y: (pos?.v ?? 0) * -(skyBox.effectiveHeight / 2) + skyBox.effectiveHeight / 2 - (sun.height / 2) + skyBox.vMargin
-
-                    layer.enabled: Theme.elevationEnabled
-                    layer.effect: MultiEffect {
-                        shadowEnabled: Theme.elevationEnabled
-                        shadowHorizontalOffset: Theme.elevationOffsetX(Theme.elevationLevel2)
-                        shadowVerticalOffset: Theme.elevationOffsetY(Theme.elevationLevel2, 4)
-                        shadowBlur: Theme.elevationEnabled ? Math.max(0, Math.min(1, (Theme.elevationLevel2 && Theme.elevationLevel2.blurPx !== undefined ? Theme.elevationLevel2.blurPx : 8) / Theme.elevationBlurMax)) : 0
-                        blurMax: Theme.elevationBlurMax
-                        shadowColor: Theme.elevationShadowColor(Theme.elevationLevel2)
-                    }
                 }
             }
         }
@@ -993,6 +961,7 @@ Item {
         ListView {
             id: hourlyList
             anchors.fill: parent
+            reuseItems: true
             orientation: ListView.Horizontal
             spacing: Theme.spacingS
             clip: true
@@ -1079,6 +1048,7 @@ Item {
         ListView {
             id: dailyList
             anchors.fill: parent
+            reuseItems: true
             orientation: ListView.Horizontal
             spacing: Theme.spacingS
             clip: true