When using combine in SwiftUI to update a Lottie Animation, it fails to update at the right time and gives an unexpected result - swift

Question

I have this ViewModel that uses combine along with a timer and I want this ViewModel to update a LottieView and filename with a new animation. When the timer counts down I want it to publish and send specific strings, these strings will be the json Lottie filenames. When my ContentView receives these filenames I want it to dynamically update the LottieViews animation.
So I made an #State variable called name inside ContentView and made that equal to the received value that is passed in. However, what confuses me is that the filename that is being published and sent from the ViewModels timer at the 10 second mark is suppose to be received and used inside LottieView(filename: name).
However this LottieView instantly runs this file when I launch the app. How so? The only place that filename exists in the whole app is when the timer reaches 10 seconds and it shouldn't even exist when LottieView(name) is called. It also ignores the previous file name that should have been run at the 19 second mark. If I were to ignore LottieView(name) all together and run a Text View instead, so in this case Text(name), when I run the app the Text properly changes when the timer reaches 10.
So how come LottieView(name) runs like this? I verified these files properly match their animations as well.
import SwiftUI
import Combine
class ViewModel: ObservableObject {
var anyCancellable: AnyCancellable?
let publish = PassthroughSubject<String, Never>()
private var timer: Timer?
private var scheduleTime = 20
init() {
fire()
anyCancellable = publish.sink { str in
print("Value that is being passed over: \(str)")
}
}
func fire() {
print("Fire timer")
timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { timer in
self.scheduleTime -= 1
print(self.scheduleTime)
if self.scheduleTime == 19 {
self.publish.send("13865-sign-for-error-flat-style")
}
if self.scheduleTime == 10 {
self.publish.send("4174-unlock-to-premium")
timer.invalidate()
}
}
}
}
import SwiftUI
import Combine
struct ContentView: View {
#ObservedObject var vm = ViewModel()
#State var name: String = ""
var body: some View {
VStack {
LottieView(filename: $name)
Text(name)
}
.onReceive(vm.publish, perform: { value in
print("passed over : \(value)")
name = value
print(name)
})
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
typealias UIViewType = UIView
#Binding var filename: String
func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
let view = UIView(frame: .zero)
let animationView = AnimationView()
let animation = Animation.named(filename)
animationView.animation = animation
animationView.contentMode = .scaleAspectFit
animationView.play()
animationView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(animationView)
NSLayoutConstraint.activate([
animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
animationView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
animationView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
return view
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
}
}

Answer 1

After a day of searching, without finding an answer, I probably came up with a not very correct solution, but it seems to work(saving temp fileName and after update LottieView checked name):
import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
typealias UIViewType = UIView
var filename: String
var animationView = AnimationView()
let isPaused: Bool
var needUpdate: Bool = false {
didSet {
if needUpdate {
let animation = Animation.named(filename)
animationView.animation = animation
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.play()
needUpdate = false
}
}
}
func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
let view = UIView(frame: .zero)
let animation = Animation.named(filename)
animationView.animation = animation
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(animationView)
NSLayoutConstraint.activate([
animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
animationView.heightAnchor.constraint(equalTo: view.heightAnchor),
])
animationView.play()
return view
}
func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<LottieView>) {
let tempFileName = context.coordinator.parent.filename
DispatchQueue.main.async {
context.coordinator.parent.filename = filename
if tempFileName != filename {
context.coordinator.parent.needUpdate = true
}
}
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator: NSObject {
var parent: LottieView
init(_ parent: LottieView) {
self.parent = parent
}
}
}