Lottie Animation glitching in UIRefreshControl subview in Swift

I am trying to load a Lottie animation in the subview of scrollview.refreshControl, the animation appears on the pull to refresh but is glitching which makes the animation look not smooth and appears to be very buggy.

the code that I am using in viewDidLoad:

let loadingView : AnimationView = {
        let view = AnimationView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.animation = Animation.named("loading-dots-blue")
        view.loopMode = .loop
        view.contentMode = .scaleAspectFill
        view.play()
        return view
    }()
    
    scrollView.refreshControl = UIRefreshControl()
    scrollView.refreshControl?.addTarget(self, action: #selector(self.refresh(_:)), for: .valueChanged)
    
    scrollView.refreshControl!.addSubview(loadingView)
    scrollView.refreshControl?.tintColor = .clear
    
    loadingView.centerXAnchor.constraint(equalTo: scrollView.refreshControl!.centerXAnchor).isActive = true
    loadingView.centerYAnchor.constraint(equalTo: scrollView.refreshControl!.centerYAnchor).isActive = true
    loadingView.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width/2).isActive = true
    loadingView.heightAnchor.constraint(equalToConstant: 50).isActive = true

This only occurs on lottie animation, the default activityIndicator appears to be animating smoothly.

The glitchy Lottie animation issue has been resolved by changing the scrollview top constraint from safe area to superview. Although I implemented this solution before with the default activity indicator but somehow it changed back to safe area when I added the lottie animation to the uirefreshcontrol.

The original answer I found on StackOverflow: https://stackoverflow.com/a/54629641/14352175