When switching tabs, the font style transition animation does not synchronize with the indicator/content switching.

[resetsix]

When I customize the tab header content, I adjust the font size and color of the selected and unselected items, but during scrolling, the switching speed of the font size and color does not keep up with the switching speed of the indicator and content.

Here is the effect of my question

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-05.at.11.01.33.mp4

This is my minimal reproducible example code

import Parchment
import SwiftUI

struct MenuItem: Identifiable, Hashable, Codable {
    let id: Int
    let parentId: Int
    let groupId: Int
    let tenantId: Int
    let title: String
    let coverType: String
    let sortIndex: Int
    let locale: String
    let children: [MenuItem]
}

struct Demo: View {
    @State private var selectedIndex: Int = 0

    private let data: [MenuItem] = [
        MenuItem(
            id: 1_000_001,
            parentId: 0,
            groupId: 1_738_985_499_333,
            tenantId: 1_000_001,
            title: "Writing",
            coverType: "LIST",
            sortIndex: 0,
            locale: "en",
            children: []
        ),
        MenuItem(
            id: 1_000_033,
            parentId: 0,
            groupId: 1_738_985_507_226,
            tenantId: 1_000_001,
            title: "Network",
            coverType: "LIST",
            sortIndex: 0,
            locale: "en",
            children: []
        ),
        MenuItem(
            id: 1_000_054,
            parentId: 0,
            groupId: 1_738_985_513_276,
            tenantId: 1_000_001,
            title: "Study",
            coverType: "LIST",
            sortIndex: 0,
            locale: "en",
            children: []
        ),
        MenuItem(
            id: 1_000_075,
            parentId: 0,
            groupId: 1_738_985_525_051,
            tenantId: 1_000_001,
            title: "Profile",
            coverType: "LIST",
            sortIndex: 0,
            locale: "en",
            children: []
        ),
        MenuItem(
            id: 1_000_096,
            parentId: 0,
            groupId: 1_738_985_530_991,
            tenantId: 1_000_001,
            title: "Career",
            coverType: "LIST",
            sortIndex: 0,
            locale: "en",
            children: []
        ),
        MenuItem(
            id: 1_000_117,
            parentId: 0,
            groupId: 1_738_985_536_518,
            tenantId: 1_000_001,
            title: "Lifestyle",
            coverType: "LIST",
            sortIndex: 0,
            locale: "en",
            children: []
        ),
        MenuItem(
            id: 1_000_138,
            parentId: 0,
            groupId: 1_738_985_542_967,
            tenantId: 1_000_001,
            title: "Leisure",
            coverType: "LIST",
            sortIndex: 0,
            locale: "en",
            children: []
        ),
    ]

    var body: some View {
        PageView(data, id: \.id, selectedIndex: $selectedIndex) { item in
            Page { record in
                Text(item.title)
                    .font(.system(size: record.isSelected ? 16 : 14, weight: record.isSelected ? .bold : .regular))
                    .foregroundColor(record.isSelected ? Color(red: 101 / 255, green: 111 / 255, blue: 245 / 255) : .gray)
                    .padding(.horizontal, 8)
                    .contentShape(Rectangle())
                    .animation(.easeInOut(duration: 0.1), value: record.isSelected)
            } content: {
                VStack {
                    Text(item.title)
                        .font(.largeTitle)
                        .foregroundColor(.gray)

                    Text("ID: \(item.id)")
                        .font(.caption)
                        .foregroundColor(.gray)
                }
            }
        }
        .menuItemSpacing(0)
        .menuItemLabelSpacing(0)
        .indicatorOptions(.visible(
            height: 3,
            zIndex: .max,
            spacing: .init(top: 0, left: 16, bottom: 0, right: 16)
        ))
        .indicatorColor(Color(red: 101 / 255, green: 111 / 255, blue: 245 / 255))
        .borderOptions(.hidden)
        .didScroll { _ in
            let currentItem = data[selectedIndex]
            print("current scroll: \(currentItem.title), ID: \(currentItem.id)")
        }
    }
}