controlcenter: prevented changing panes before opening animation completes

modules/controlcenter/ControlCenter.qml

@@ -64,6 +64,11 @@ Item {
                 anchors.fill: parent
 
                 function onWheel(event: WheelEvent): void {
+                    // Prevent tab switching during initial opening animation to avoid blank pages
+                    if (!panes.initialOpeningComplete) {
+                        return;
+                    }
+                    
                     if (event.angleDelta.y < 0)
                         root.session.activeIndex = Math.min(root.session.activeIndex + 1, root.session.panes.length - 1);
                     else if (event.angleDelta.y > 0)
@@ -76,10 +81,13 @@ Item {
 
                 screen: root.screen
                 session: root.session
+                initialOpeningComplete: root.initialOpeningComplete
             }
         }
 
         Panes {
+            id: panes
+
             Layout.fillWidth: true
             Layout.fillHeight: true
 
@@ -88,4 +96,7 @@ Item {
             session: root.session
         }
     }
+    
+    // Expose initialOpeningComplete for NavRail to prevent tab switching during opening animation
+    readonly property bool initialOpeningComplete: panes.initialOpeningComplete
 }

modules/controlcenter/NavRail.qml

@@ -13,6 +13,7 @@ Item {
 
     required property ShellScreen screen
     required property Session session
+    required property bool initialOpeningComplete
 
     implicitWidth: layout.implicitWidth + Appearance.padding.larger * 4
     implicitHeight: layout.implicitHeight + Appearance.padding.large * 2
@@ -197,6 +198,10 @@ Item {
                 color: item.active ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
 
                 function onClicked(): void {
+                    // Prevent tab switching during initial opening animation to avoid blank pages
+                    if (!root.initialOpeningComplete) {
+                        return;
+                    }
                     root.session.active = item.label;
                 }
             }

modules/controlcenter/Panes.qml

@@ -18,6 +18,9 @@ ClippingRectangle {
 
     required property Session session
 
+    // Expose initialOpeningComplete so parent can check if opening animation is done
+    readonly property bool initialOpeningComplete: layout.initialOpeningComplete
+
     color: "transparent"
     clip: true
     focus: false
@@ -140,6 +143,32 @@ ClippingRectangle {
 
         // Track if this pane has ever been loaded to enable caching
         property bool hasBeenLoaded: false
+        
+        // Function to compute if this pane should be active
+        function updateActive(): void {
+            const diff = Math.abs(root.session.activeIndex - pane.index);
+            const isActivePane = diff === 0;
+            let shouldBeActive = false;
+            
+            // During initial opening animation, only load the active pane
+            // This prevents hiccups from multiple panes loading simultaneously
+            if (!layout.initialOpeningComplete) {
+                shouldBeActive = isActivePane;
+            } else {
+                // After initial opening, allow current and adjacent panes for smooth transitions
+                if (diff <= 1) {
+                    shouldBeActive = true;
+                } else if (pane.hasBeenLoaded) {
+                    // For distant panes that have been loaded before, keep them active to preserve cached data
+                    shouldBeActive = true;
+                } else {
+                    // For new distant panes, wait until animation completes to avoid heavy loading during transition
+                    shouldBeActive = layout.animationComplete;
+                }
+            }
+            
+            loader.active = shouldBeActive;
+        }
 
         Loader {
             id: loader
@@ -147,35 +176,17 @@ ClippingRectangle {
             anchors.fill: parent
             clip: false
             asynchronous: true
-            active: {
+            active: false
-                const diff = Math.abs(root.session.activeIndex - pane.index);
+            
-                const isActivePane = diff === 0;
+            Component.onCompleted: {
-                
+                pane.updateActive();
-                // During initial opening animation, only load the active pane
+            }
-                // This prevents hiccups from multiple panes loading simultaneously
+            
-                if (!layout.initialOpeningComplete) {
+            onActiveChanged: {
-                    if (isActivePane) {
+                // Mark pane as loaded when it becomes active
-                        pane.hasBeenLoaded = true;
+                if (active && !pane.hasBeenLoaded) {
-                        return true;
-                    }
-                    // Defer all other panes until initial opening completes
-                    return false;
-                }
-                
-                // After initial opening, allow current and adjacent panes for smooth transitions
-                if (diff <= 1) {
                     pane.hasBeenLoaded = true;
-                    return true;
                 }
-                
-                // For distant panes that have been loaded before, keep them active to preserve cached data
-                // Only wait for animation if pane hasn't been loaded yet
-                if (pane.hasBeenLoaded) {
-                    return true;
-                }
-                
-                // For new distant panes, wait until animation completes to avoid heavy loading during transition
-                return layout.animationComplete;
             }
             
             onItemChanged: {
@@ -185,5 +196,22 @@ ClippingRectangle {
                 }
             }
         }
+        
+        Connections {
+            target: root.session
+            function onActiveIndexChanged(): void {
+                pane.updateActive();
+            }
+        }
+        
+        Connections {
+            target: layout
+            function onInitialOpeningCompleteChanged(): void {
+                pane.updateActive();
+            }
+            function onAnimationCompleteChanged(): void {
+                pane.updateActive();
+            }
+        }
     }
 }