I'm implementing infinite scrolling with Swift Charts where additional historical data loads when scrolling near the beginning of the dataset. However, when new data is loaded, the chart's scroll position jumps unexpectedly.

Current behavior:

• Initially loads 10 data points, displaying the latest 5
• When scrolling backwards with only 3 points remaining off-screen, triggers loading of 10 more historical points
• After loading, the scroll position jumps to the 3rd position of the new dataset instead of maintaining the current view

Expected behavior:

• Scroll position should remain stable when new data is loaded
• User's current view should not change during data loading

Here's my implementation logic using some mock data:

import SwiftUI
import Charts

struct DataPoint: Identifiable {
  let id = UUID()
  let date: Date
  let value: Double
}

class ChartViewModel: ObservableObject {
  @Published var dataPoints: [DataPoint] = []
  private var isLoading = false
  
  init() {
    loadMoreData()
  }
  
  func loadMoreData() {
    guard !isLoading else { return }
    
    isLoading = true
    
    let newData = self.generateDataPoints(
      endDate: self.dataPoints.first?.date ?? Date(),
      count: 10
    )
    
    self.dataPoints.insert(contentsOf: newData, at: 0)
    self.isLoading = false
    
    print("\(dataPoints.count) data points.")
  }
  
  private func generateDataPoints(endDate: Date, count: Int) -> [DataPoint] {
    var points: [DataPoint] = []
    let calendar = Calendar.current
    
    for i in 0..<count {
      let date = calendar.date(
        byAdding: .day,
        value: -i,
        to: endDate
      ) ?? endDate
      
      let value = Double.random(in: 0...100)
      points.append(DataPoint(date: date, value: value))
    }
    
    return points.sorted { $0.date < $1.date }
  }
}

struct ScrollableChart: View {
  @StateObject private var viewModel = ChartViewModel()
  @State private var scrollPosition: Date
  
  @State private var scrollDebounceTask: Task<Void, Never>?
  
  init() {
    self.scrollPosition = .now.addingTimeInterval(-4*24*3600)
  }
  
  var body: some View {
    Chart(viewModel.dataPoints) { point in
      BarMark(
        x: .value("Time", point.date, unit: .day),
        y: .value("Value", point.value)
      )
    }
    .chartScrollableAxes(.horizontal)
    .chartXVisibleDomain(length: 5 * 24 * 3600)
    .chartScrollPosition(x: $scrollPosition)
    .chartXScale(domain: .automatic(includesZero: false))
    .frame(height: 300)
    .onChange(of: scrollPosition) { oldPosition, newPosition in
      scrollDebounceTask?.cancel()
      
      scrollDebounceTask = Task {
        try? await Task.sleep(for: .milliseconds(300))
        
        if !Task.isCancelled {
          checkAndLoadMoreData(currentPosition: newPosition)
        }
      }
    }
  }
  
  private func checkAndLoadMoreData(currentPosition: Date?) {
    guard let currentPosition,
          let earliestDataPoint = viewModel.dataPoints.first?.date else {
      return
    }
    
    let timeInterval = currentPosition.timeIntervalSince(earliestDataPoint)
    
    if timeInterval <= 3 * 24 * 3600 {
      viewModel.loadMoreData()
    }
  }
}

I attempted to compensate for this jump by adding: scrollPosition = scrollPosition.addingTimeInterval(10 * 24 * 3600) after viewModel.loadMoreData(). However, this caused the chart to jump in the opposite direction by 10 days, rather than maintaining the current position.

What's the problem with my code and how to fix it?