Display a LazyVGrid with Sections

I am trying to render a list of entities that are split into sections (think CoreData NSFetchedResultsSectionInfo).

This my solution, however it renders poorly. The ScrollView is far too long, scrolling is not fluid and may freeze.

struct SectionsGridView: View {
    let results: Sections<ListItemViewModel>
    let columns = [ GridItem(.adaptive(minimum: .cellSize)) ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: .gridSpacing, pinnedViews: .sectionHeaders) {
                ForEach(results) { section in
                    Section(header: Text(section.title?.uppercased() ?? "error")) {
                        ForEach(section) { item in
                            GridCell().environmentObject(item)
                        }
                    }
                }
            }
        }
    }
}

private extension CGFloat {
    static let gridSpacing = 8.0
    static let cellSize = 100.0
}

I believe this solution (or very similar) used to be in the documentation. I have tried several ways of doing this, either I get the scrolling issue or pinnedViews won't pin.

Replies

Resolved the problem. The layout above works fine, the problem was with my Model. Items in the collection had unstable identifiers.