Timer firing lots of updates seems to interfere with Picker

[jaroslavas]

I've found this idea for a timer somewhere in documentation, and use it to update times in the view quite often, because time shown is with milliseconds, so I'd like to update it at least each 10ms:

Reducer:

            case .startTime:
                return .run { send in
                    for await _ in self.clock.timer(interval: .seconds(0.01)) {
                        await send(.timerTicked)
                    }
                }

            case .timerTicked:
                state.currentTimeInMillis = Date().millis
                return .none

View:

var body: some View {
        VStack {
            WithViewStore(self.store, observe: { $0 }) { viewStore in
                 ViewWithTimers {}
                 .task { await viewStore.send(.startTime).finish() }
            }
            WithViewStore(self.store, observe: { $0.editState }) { _ in
                ViewWithForm {}
            }
        }
         
...

The problem, is that there is also a form on the same screen that has Pickers in it. When I have timer ticker firing more than few times a second pickers stop working properly: you can see that animation for value change starts and then it abruptly goes back to the original value, effectively canceling user selection.

On the video I first press in this order: gatetime, dns, penalty, incorrect, penalty, dnf. But you can see that it catches only 3 presses and one of them reverses back:

RPReplay_Final1685474883.mov

What is interesting, is that for example writing into TextField looks choppy, but it still works, no characters are missing.

Is there something I'm doing wrong? Any ideas welcome :)

[lightandshadow68]

Check out the performance section in the docs. https://pointfreeco.github.io/swift-composable-architecture/main/documentation/composablearchitecture/performance/

For example, one option is to set your timer that generates TCA events to fire every second, then generate some kind of simulated millisecond display values in a SwiftUI view with its own timer that fires between ticks (but at some interval less than 10 ms.) The view can create the timer display by concatenating the sub-second values to the store's timer value, reseting the local sub second values when the view store updates to the next second. When the timer stops or some event happens, display the actual time down to the ms value. You can use onChange to detect second increments in your timer view to reset the local sub-second values.

Also, create timer and picker subviews hierarchies with their own substates that can be observed separately. This way, your entire view doesn't keep updating every time the timer display updates.

[wshamp]

Apparently this is an apple bug. I was able to work around it with this approach:

#2509