controlcenter: prevented changing panes before opening animation completes

This commit is contained in:
ATMDA 2025-11-17 19:27:45 -05:00
parent 23e5d7d13c
commit 34abc91523
3 changed files with 71 additions and 27 deletions

View file

@ -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
}

View file

@ -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;
}
}

View file

@ -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: {
const diff = Math.abs(root.session.activeIndex - pane.index);
const isActivePane = diff === 0;
// During initial opening animation, only load the active pane
// This prevents hiccups from multiple panes loading simultaneously
if (!layout.initialOpeningComplete) {
if (isActivePane) {
pane.hasBeenLoaded = true;
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) {
active: false
Component.onCompleted: {
pane.updateActive();
}
onActiveChanged: {
// Mark pane as loaded when it becomes active
if (active && !pane.hasBeenLoaded) {
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();
}
}
}
}