Combine + SwiftUI Form + RunLoop causes table view to render unpredictably

The problem in handling async processing... In your default case all operations are performed synchronously within one(!) animation block, so all works fine. But in second scenario (by introducing any scheduler in publishers chain) some operations are performed synchronously (like removing) that initiates animation, but operation from publisher comes asynchronously at the moment when animation is already in progress, and changing model breaks that running animation giving unpredictable result.

The possible approach to solve this is to separate initiating and resulting operations by different blocks and make publishers chan really async but processing in background and retrieving results in main queue.

Here is modified publishers chain. Tested with Xcode 12.4 / iOS 14.4

Note: also you can investigate possibility of wrapping all again in one animation block, but already in synk after retrieving results - this will require changing logic so it just for consideration

private func setupPipeline() {
    filterCancellable =
        Publishers.CombineLatest($searchTerm,$chosenItems)
        .debounce(for: .seconds(0.5), scheduler: DispatchQueue.main)   // debounce input
        .subscribe(on: DispatchQueue.global(qos: .background))         // prepare for processing in background
        .print()
        .map { (term,chosen) -> (filtered: [DItem],chosen: Set<DItem>) in
            if term.isEmpty { //if the term is empty, return everything
                return (filtered: self.items, chosen: chosen)
            } else { //if the term is not empty, return only items that contain the search term
                return (filtered: self.items.filter { $0.name.localizedStandardContains(term) }, chosen: chosen)
            }
        }
        .map { (filtered,chosen) in
            (filtered: filtered.filter { !chosen.contains($0) }, chosen: chosen) //don't include any items in the chosen items list
        }
        .receive(on: DispatchQueue.main) // << receive processed items on main queue
        .sink { [weak self] (filtered, chosen) in
            withAnimation {
                self?.filteredItems = filtered      // animating this as well
                }
        }
}

@Asperi's suggestion got me on the right track thinking about how many withAnimation { } events would get called. In my original question, filteredItems and chosenItems would be changed in different iterations of the RunLoop when receive(on:) or debounce was used, which seemed to be the root cause of the unpredictable layout behavior.

By changing the debounce time to a longer value, this would prevent the issue, because one animation would be done after the other was finished, but was a problematic solution because it relied on the animation times (and potentially magic numbers if explicit animation times weren't sent).

I've engineered a somewhat tacky solution that uses a PassThroughSubject for chosenItems instead of assigning to the @Published property directly. By doing this, I can move all assignment of the @Published values into the sink, resulting in just one animation block happening.

I'm not thrilled with the solution, as it feels like an unnecessary hack, but it does seem to solve the issue:

class Completer : ObservableObject {
    @Published var items : [Item] = [] {
        didSet {
            setupPipeline()
        }
    }
    @Published private(set) var filteredItems : [Item] = []
    @Published private(set) var chosenItems: Set<Item> = []
    @Published var searchTerm = ""
    
    private var chosenPassthrough : PassthroughSubject<Set<Item>,Never> = .init()
    private var filterCancellable : AnyCancellable?
    
    private func setupPipeline() {
        filterCancellable =
            Publishers.CombineLatest($searchTerm,chosenPassthrough)
            .debounce(for: .seconds(0.2), scheduler: DispatchQueue.main)
            .map { (term,chosen) -> (filtered: [Item],chosen: Set<Item>) in
                if term.isEmpty {
                    return (filtered: self.items, chosen: chosen)
                } else {
                    return (filtered: self.items.filter { $0.name.localizedStandardContains(term) }, chosen: chosen)
                }
            }
            .map { (filtered,chosen) in
                (filtered: filtered.filter { !chosen.contains($0) }, chosen: chosen)
            }
            .sink { [weak self] (filtered, chosen) in
                withAnimation {
                    self?.filteredItems = filtered
                    self?.chosenItems = chosen
                }
            }
        chosenPassthrough.send([])
    }
    
    func toggleItemChosen(item: Item) {
        if chosenItems.contains(item) {
            var copy = chosenItems
            copy.remove(item)
            chosenPassthrough.send(copy)
        } else {
            var copy = chosenItems
            copy.insert(item)
            chosenPassthrough.send(copy)
        }
        searchTerm = ""
    }
    
    func clearChosen() {
        chosenPassthrough.send([])
    }
}

struct ContentView: View {
    @StateObject var completer = Completer()
    
    var body: some View {
        Form {
            Section {
                TextField("Term", text: $completer.searchTerm)
            }
            Section {
                ForEach(completer.filteredItems) { item in
                    Button(action: {
                        completer.toggleItemChosen(item: item)
                    }) {
                        Text(item.name)
                    }.foregroundColor(completer.chosenItems.contains(item) ? .red : .primary)
                }
            }
            if completer.chosenItems.count != 0 {
                Section(header: HStack {
                    Text("Chosen items")
                    Spacer()
                    Button(action: {
                        completer.clearChosen()
                    }) {
                        Text("Clear")
                    }
                }) {
                    ForEach(Array(completer.chosenItems)) { item in
                        Button(action: {
                            completer.toggleItemChosen(item: item)
                        }) {
                            Text(item.name)
                        }
                    }
                }
            }
        }.onAppear {
            completer.items = ["Chris", "Greg", "Ross", "Damian", "George", "Darrell", "Michael"]
                .map { Item(name: $0) }
        }
    }
}

struct Item : Identifiable, Hashable, Equatable {
    var id = UUID()
    var name : String
}