Lottie performs poorly in SwiftUI

[shreyas-bangera-swiggy-02]

Which Version of Lottie are you using?

Lottie 4.5.0

I'm using a lottie in a collection view. When I use lottie in the UIKit context, i.e. using a UICollectionViewCell subclass via uikitCellRegistration as can be seen in the attached code, it performs well without any issues. If I try to add the SwiftUI variant added via UIHostingConfiguration(swiftuiCellRegistration), it starts to stutter with high CPU usage & on occasion results in app termination with memory warning. Shared the code below to reproduce the same. This setup is just to put things into perspective.

In a pure SwiftUI setup, using a container such LazyVStack or List instead of UICollectionView, the same performance degradation can be observed.

import UIKit
import Lottie
import SwiftUI

class LottieCollectionViewCell: UICollectionViewCell {
    
    private var animationView: LottieAnimationView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupAnimationView()
    }
    
    override func prepareForReuse() {
        animationView = nil
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupAnimationView() {
        animationView = LottieAnimationView(animation: nil)
        LottieAnimation.loadedFrom(url: URL(string: "https://jsonkeeper.com/b/5R21")!) { [weak self] animation in
            self?.animationView.animation = animation
            self?.animationView.play()
        }
        animationView.contentMode = .scaleAspectFit
        animationView.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(animationView)
        
        NSLayoutConstraint.activate([
            animationView.heightAnchor.constraint(equalToConstant: 200),
            animationView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width),
            animationView.topAnchor.constraint(equalTo: contentView.topAnchor),
            animationView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }
}

final class CollectionView: UICollectionView {
    typealias Item = String
    var items: [Item] {
        didSet {
            update()
        }
    }
    var diffDataSource: UICollectionViewDiffableDataSource<Int, Item>?
    
    init(items: [Item]) {
        self.items = items
        let config = UICollectionLayoutListConfiguration(appearance: .plain)
        let layout = UICollectionViewCompositionalLayout.list(using: config)
        super.init(frame: .zero, collectionViewLayout: layout)
        let uikitCellRegistration = UICollectionView.CellRegistration<LottieCollectionViewCell, Item> { _, _, _ in }
        let swiftuiCellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Item> {
            cell, indexPath, item in
            cell.contentConfiguration = UIHostingConfiguration {
                LottieView({
                    await .loadedFrom(url: URL(string: "https://jsonkeeper.com/b/5R21")!)
                })
                .id(item.id)
            }
        }
        diffDataSource = UICollectionViewDiffableDataSource<Int, Item>(collectionView: self) {
            $0.dequeueConfiguredReusableCell(
                using: swiftuiCellRegistration,
                for: $1,
                item: $2
            )
            // uncomment for UIKit variant & comment the above at the same time.
//            $0.dequeueConfiguredReusableCell(
//                using: uikitCellRegistration,
//                for: $1,
//                item: $2
//            )
        }
        update()
    }
    
    func update() {
        var snapshot = NSDiffableDataSourceSnapshot<Int, Item>()
        snapshot.appendSections([0])
        snapshot.appendItems(items)
        diffDataSource?.apply(snapshot, animatingDifferences: false)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension String: @retroactive Identifiable {
    public var id: String {
        self
    }
}

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let collectionView = CollectionView(items: (1...50).map(String.init))
        view.addSubview(collectionView)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
}

On doing an app profile, it revealed the cause of hangs to be animation layer creation. In SwiftUI case, it seems to be called repeatedly creating the overhead.
Please check this on priority as our app is heavily reliant on Lotties & this issue is a bottleneck for us to build anything on SwiftUI.
Similar issue was reported earlier as well without much traction

App profile screenshot:

Expected Behavior

Performance in UIKit:

uikit_variant.MP4

Actual Behavior

Performance in SwiftUI:

swiftui_variant.MP4

Animation JSON

sample_lottie.json

[calda]

Can you share a complete sample project demonstrating the issue? e.g. an Xcode project that can be built and ran, and has performance problems. Including a comparison of the performant UIKit integration vs non-performant SwiftUI integration would be helpful.

[shreyas-bangera-swiggy-02]

@calda Attaching the sample project as requested:
LottiePerf.zip

You can toggle between these 2 dequeue methods to switch between UIKit & SwiftUI.