AnyTransition with Animation not working properly

[tiagopigatto]

I'm trying to convert some parts of a project to TCA and I am stuck at one point which I'm not sure if it's a SwiftUI problem or just me not using TCA correctly.

I have this wrapper in SwiftUI that expects a TextView and animates it in whenever the text is changed:

struct TextFadeIn<TextView: View>: View {
    @State var shown: Bool = false
    let delay: Double
    let textView: () -> TextView

    init(delay: Double, @ViewBuilder textView: @escaping () -> TextView) {
        self.delay = delay
        self.textView = textView
    }


    func inTransition(duration: Double, delay: Double) -> AnyTransition {
        .opacity.animation(.easeInOut(duration: duration).delay(delay)) & .move(edge: .bottom)
    }

    
    func outTransition(duration: Double) -> AnyTransition {
        .opacity.animation(.easeInOut(duration: duration))
    }
    
    var body: some View {
        // have to wrap a view with a transition into a `VStack` to make it work in previews, see https://www.bigmountainstudio.com/community/public/posts/80023-previewing-swiftui-transition-animations
        VStack {
            if self.shown {
                self.textView()
                    .transition(.asymmetric(insertion: self.inTransition(duration: 1.2, delay: self.delay),
                                            removal: self.outTransition(duration: 0.5)))
            }
        }
        .animation(.interpolatingSpring(stiffness: 90, damping: 13).delay(self.delay), value: self.shown)
        .onAppear {
            self.shown = true
        }
        .onDisappear {
            self.shown = false
        }
    }
}

Then I have my feature converted to TCA which is a Footer that shows my TextFadeIn (this is the part where I don't see the text change or animate):

struct FooterView: View {
            var store: StoreOf<FooterTCA>
            
            var body: some View {
                WithViewStore(self.store) { viewStore in
                    ZStack {
                        self.rollingText(viewStore: viewStore)
                    }
                    .zIndex(1)
                    .onAppear {
                        viewStore.send(.footerAppeared)
                    }
                }
                .zIndex(2)
            }
            
            func rollingText(viewStore: ViewStoreOf<FooterTCA>) -> some View {
                TextFadeIn(delay: viewStore.textFadeInDelay) {
                    FooterText(text: viewStore.currentRollingText, color: .white)
                }
                .id(viewStore.rollingTextAnimationPhase)

            }
        }

The text is changed on my reduce function, where I start a timer when my view appears:

func reduce(into state: inout State, action: Action) -> EffectTask<Action> {
            switch action {
                case .footerAppeared:
                    let delay = state.textFadeInDelay
                    return .run { send in
                        for await _ in mainQueue.timer(interval: .seconds(4)) {
                            await send(.phaseChanged, animation: .interpolatingSpring(stiffness: 90, damping: 13).delay(delay))
                        }
                    }
                    .cancellable(id: CancelID.self)
                case let .brightnessChanged(brightness):
                    state.progress = brightness / state.brightnessThreshold
                    return .none
                case .phaseChanged:
                    if state.rollingTextAnimationPhase < state.maxAnimationPhase {
                        state.rollingTextAnimationPhase += 1
                    } else {
                        state.rollingTextAnimationPhase = 0
                    }
                    
                    return .none
            }
        }

I've tried creating the view with the animations/transitions instead of calling the function but it was really buggy. Sometimes the animation worked correctly, sometimes the text wouldn't change at all:

struct FooterView: View {
            var store: StoreOf<FooterTCA>
            
            var body: some View {
                WithViewStore(self.store) { viewStore in
                    ZStack {
                        FooterText(text: viewStore.currentRollingText, color: .white)
                            .transition(.asymmetric(insertion: AnyTransition.opacity.animation(Animation.easeInOut(duration: 1.2).delay(viewStore.textFadeInDelay))
                                                    & AnyTransition.move(edge: .bottom),
                                                    removal: AnyTransition.opacity.animation(Animation.easeInOut(duration: 0.5))))
                            .id(viewStore.rollingTextAnimationPhase)
                    }
                    .zIndex(1)
                    .onAppear {
                        viewStore.send(.footerAppeared)
                    }
                }
                .zIndex(2)
            }
            
        }

Things I've noticed that didn't get me anywhere:

• Whenever I have my feature implemented only in SwiftUI, the text change causes the .onAppear() and .onDisappear() view modifiers to be called. This doesn't happen when the text is controlled by a TCA state;
• removing the .animation from the transitions seems to get me closer to where I want but I still get inconsistent results;
• When I say inconsistent I mean that the animation will work sometimes and out of nowhere it won't work anymore without any code changes;

I'm recently new to TCA, so I'm sorry if I'm doing anything stupid at all.

[tiagopigatto]

Having that action sent from within the reducer is giving me weird behavior. I enabled FooterTCA()._printChanges() on the reducer and it's odd that sometimes the reducer print the changes and sometimes it doesn't even though the code inside .phaseChanged action gets executed every time.

[mbrandonw]

Can you provide a full, compiling sample project?

[tiagopigatto]

@mbrandonw thanks for looking into this. I put together a mini-frankenstein that is compiling and it replicates the behavior I'm seeing:
TCA-Sample.zip

While I was exploring more, I found out that removing @Environment(\.scenePhase) var scenePhase fixes the problem completely, which is weird...

[mbrandonw]

Hi @tiagopigatto, that is really bizarre. I don't get why the @Environment(\.scenePhase) would cause these problems. Other types of environment values do not have a problem, such as @Environment(\.colorScheme). It seems like a SwiftUI bug, but it's really hard to tell.

[tiagopigatto]

Yes, I've also tried with other environments and they didn't cause any problems. One thing I noticed is that when I have the @Environment(\.scenePhase) the init method of my views gets called twice (there's a print statement in the sample project). Maybe that's instantiating the viewStore twice and causing it to not respond to actions? At this point I'm just guessing because I'm really new to TCA.