I have a particular issue where, when using two ScrollViews and trying to display one or the other conditionnally, the second one never works.

To make it simple : I need to display a list, but if a certain action is made, I need to display a second different list instead (not filtering, a whole other data type and cells). When the condition to display the second ScrollView is active, I see the second ScrollView. But :

I can’t scroll at all unless I go back to the first ScrollView
In the same manner, buttons inside the second ScrollView doesn’t work
It seems like the user interaction is disabled on the second scroll view. I tried to inverse the condition, to see if there was a problem with the second layout, but the issue remains: it’s always the scrollview that comes second that doesn’t work.

Here’s the current code for the view:

struct SearchView: View {

    @StateObject var viewModel: SearchViewModel

    var body: some View {
        ZStack(alignment: .top) {
            ScrollView {
                LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 2), spacing: 16) {
                    ForEach(viewModel.categories, id: .id) { category in
                        Button {
                            viewModel.categoryTapped(category: category)
                        } label: {
                            CategoryCellView(category: category)
                        }
                    }
                }
                .padding(.horizontal, 16)
            }
            .opacity(viewModel.items.isEmpty ? 1 : 0)

            ScrollView {
                LazyVStack {
                    ForEach(viewModel.items) { item in
                        Button {
                            viewModel.openItem(item: item)
                        } label: {
                            cell(for: item)
                        }
                    }
                }
                .padding(.horizontal, 16)
            }
            .opacity(viewModel.items.isEmpty ? 0 : 1)
        }
        .onAppear {
            viewModel.load()
        }
    }
}

In this version, I’m trying to display both ScrollView but hide one with opacity, but it’s because I tried so many things already. Same result with an if/else condition determining which scroll views is displayed, same result by setting the if/else condition inside an unique ScrollView, same result by setting the if/else inside the LazyVGrid.

If someone has an idea, it will be glady appreciated! thanks