fix: dashboard tabs scroll now only loads previous item + next item

Modules/Dashboard/Content.qml

@@ -81,9 +81,9 @@ Item {
 		anchors.right: parent.right
 		anchors.top: tabs.bottom
 		anchors.topMargin: Tokens.spacing.small
-		clip: view.currentIndex !== 3 || view.contentX !== (view.currentItem?.x ?? 0)
+		clip: view.currentIndex !== 3 || (!view.currentItem?.settled ?? true)
 
-		Flickable {
+		Item {
 			id: view
 
 			readonly property int currentIndex: root.screenState.dashboardTab
@@ -93,32 +93,8 @@ Item {
 			}
 
 			anchors.fill: parent
-			contentHeight: row.implicitHeight
-			contentWidth: row.implicitWidth
-			contentX: currentItem?.x ?? 0
 			implicitHeight: currentItem?.implicitHeight ?? 0
 			implicitWidth: currentItem?.implicitWidth ?? 0
-			interactive: false
-
-			Behavior on contentX {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-
-			onContentXChanged: {
-				if (!moving || !currentItem)
-					return;
-
-				const x = contentX - currentItem.x;
-				if (x > currentItem.implicitWidth / 2)
-					root.screenState.dashboardTab = Math.min(root.screenState.dashboardTab + 1, tabs.count - 1);
-				else if (x < -currentItem.implicitWidth / 2)
-					root.screenState.dashboardTab = Math.max(root.screenState.dashboardTab - 1, 0);
-			}
-
-			RowLayout {
-				id: row
 
 			Repeater {
 				id: repeater
@@ -129,22 +105,31 @@ Item {
 					required property int index
 					required property var modelData
 
-						Layout.alignment: Qt.AlignTop
+					readonly property real targetX: index < view.currentIndex ? -view.implicitWidth : index > view.currentIndex ? view.implicitWidth : 0
-						sourceComponent: modelData.component
+					readonly property bool settled: x === targetX
 
-						Component.onCompleted: active = Qt.binding(() => {
+					active: index === view.currentIndex || opacity > 0
-							if (index === view.currentIndex)
+					opacity: index === view.currentIndex ? 1 : 0
-								return true;
+					sourceComponent: modelData.component
-							const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
+					visible: opacity > 0
-							const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
+					x: targetX
-							return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
+					y: 0
-						})
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
+					Behavior on x {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
 				}
 				model: ScriptModel {
 					values: root.dashboardTabs
 				}
 			}
-			}
 
 			Component {
 				id: dashComponent