LazyVGrid with paging scroll behavior

Question

I have a LazyVGrid inside a nested ScrollViews that I'm using to view a table's contents, and it's working fine except for one major issue... when the number of rows in the table is very large, the loading time for the view grows exponentially.

Here is my code:

struct PagedGrid: View {
    var rowCount: Int
    var columnCount: Int
    
    var colors: [Color] = [.red, .blue, .green, .orange, .yellow, .purple]
    
    var body: some View {
        GeometryReader { geo in
            let oneColumn = GridItem(.fixed(geo.size.width), spacing: 0.0)
            let gridItems = Array(repeating: oneColumn, count: columnCount)
            
            ScrollView(.vertical) {
                ScrollView(.horizontal) {
                    LazyVGrid(columns: gridItems, spacing: 0.0) {
                        ForEach(0..<(rowCount * columnCount), id: \.self) { index in
                            Text("\(index)")
                                .frame(maxWidth: .infinity)
                                .padding(.vertical, 10)
                                .background(colors[index % colors.count])
                        }
                    }
                    .scrollTargetLayout()
                }
                .scrollTargetBehavior(.viewAligned)
            }
        }
    }
}

I've found that the cause of the slow loading is that nesting the ScrollViews causes the LazyVGrid to load all contents upon the initial view loading (negating the lazy benefits), so the easy fix would be to use one ScrollView with two-axis scrolling, but this doesn't work because one requirement for the view is to have paged scrolling on the horizontal axis. When I use a single ScrollView, or when I try nesting the vertical ScrollView inside the horizontal one, the .scrollTargetBehavior(.viewAligned) fails.

Can anyone help me think of a way around this?