CardStack and Lottie

I'm working on animations. It has a stack of scarts on which are Lottie animations. The CardStack library is used for cards, and Lottie is used for Lottie.

In the CardStack library, the configuration parameter is set to show 2 cards (current and next), but despite this, memory is released only when the view changes state.

Memory accumulates up to the very last card.

Accordingly, if 100 cards arrive, then there will be trouble. And most importantly, there are no memory leaks.

I tried various accelerators with Lottie libraries and it did not help.

In which direction at least I should look, as to not waste so much memory? Everything works fine on the other operating system, so the problem is not with animation.

Here is my code for the UIViewRepresentable:

struct CustomLottieView: UIViewRepresentable {
enum LoadingType {
case url(URL)
case data(DataResource)
}
let type: LoadingType
let isPaused: Bool
let card: CardModel?
let animationView = LottieAnimationView()
let transition: BoundCardType?
init(type: LoadingType, isPaused: Bool = false, card: CardModel? = nil, transition: BoundCardType? = nil) {
self.isPaused = isPaused
self.type = type
self.card = card
self.transition = transition
}
func makeUIView(context: Context) -> UIView {
let view = UIView(frame: .zero)
switch type {
case .url(let url):
LottieAnimation.loadedFrom(url: url) { animation in
animationView.animation = animation
isPaused ? nil : animationView.play()
animationView.loopMode = .loop
if let skillCardModel = card as? SkillCardModel {
animationView.play(marker: String(skillCardModel.currentLevelIndex + 1))
}
}
case .data(let data):
animationView.animation = .named(data.name, bundle: data.bundle)
if let skillCardModel = card as? SkillCardModel {
animationView.play(marker: String(skillCardModel.currentLevelIndex + 1))
}
}
animationView.contentMode = .scaleAspectFit
animationView.play()
view.addSubview(animationView)
animationView.translatesAutoresizingMaskIntoConstraints = false
animationView.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true
animationView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
if isPaused {
context.coordinator.parent.animationView.pause()
} else {
if let skillCardModel = card as? SkillCardModel {
if !context.coordinator.parent.animationView.isAnimationPlaying || animationView.animation == nil {
context.coordinator.parent.animationView.play(marker: String(skillCardModel.currentLevelIndex + 1))
} else {
withAnimation {
var transitionMarker = ""
if let transition = transition {
switch transition {
case .left:
transitionMarker = context.coordinator.parent.animationView.animation?.markerNames.first(where: { $0.contains(">\(skillCardModel.currentLevelIndex + 2)") }) ?? ""
context.coordinator.parent.animationView.play(fromMarker: String(skillCardModel.currentLevelIndex + 2), toMarker: transitionMarker, loopMode: .playOnce)
case .right:
transitionMarker = context.coordinator.parent.animationView.animation?.markerNames.first(where: { $0.contains("\(skillCardModel.currentLevelIndex)>") }) ?? ""
context.coordinator.parent.animationView.play(fromMarker: transitionMarker, toMarker: String(skillCardModel.currentLevelIndex + 1), loopMode: .playOnce)
}
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
context.coordinator.parent.animationView.play(marker: String(skillCardModel.currentLevelIndex + 1), loopMode: .loop)
}
}
}
} else {
context.coordinator.parent.animationView.play()
}
}
}
func makeCoordinator() -> Coordinator {
Coordinator(parent: self)
}
struct Coordinator {
var parent: CustomLottieView
}
}

You're describing a characteristic of the CardStack Library; it stores all the card item data models as well as each associated View. Even if a card view isn't being displayed onscreen (expanded) at the moment, it will still be stored in memory.

This makes sense; the views are stored in a lazy-loaded property, which when loaded will generate a view for each card item. In other words, the views are generated all-at-once and stored for the duration of the CardStack's lifecycle.

It sounds like you'd prefer the CardStack library to act more like TableView or CollectionView, dynamically generating views as they are needed and destroying them as they move offscreen. That's not how CardStack has been implemented.

I suggest forking the CardStack library, and changing how views are generated and stored. You'll still need to pregenerate views for each card (since you need some kind of visual to appear in the stack), but the inner content of each card doesn't need to be generated until just before the card will appear onscreen (expanded). When a card goes offscreen (collapsed) you can remove this content view from memory.