UIStackView stretching out sub view aligning it - swift

Question

I'm trying to lay out a StackView programatically, the effect I would like to achieve is
but instead I am getting
I do not understand why the loadingDotView is stretching to fill up all the space?
let loadingDotView: UIView = {
let ldv = UIView()
ldv.backgroundColor = .white
ldv.alpha = 0
ldv.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
ldv.layer.cornerRadius = 10
ldv.layer.masksToBounds = true
ldv.translatesAutoresizingMaskIntoConstraints = false
return ldv
}()
let dotsStackView: UIStackView = {
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.distribution = .equalSpacing
stackView.translatesAutoresizingMaskIntoConstraints = false
return stackView
}()
Setup code...
view.addSubview(dotsStackView)
NSLayoutConstraint.activate([
dotsStackView.heightAnchor.constraint(equalToConstant: 20),
dotsStackView.widthAnchor.constraint(equalToConstant: 100),
dotsStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
dotsStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
dotsStackView.addArrangedSubview(loadingDotView)
dotsStackView.addArrangedSubview(loadingDotView)
dotsStackView.addArrangedSubview(loadingDotView)

Answer 1

This ( closure )
let loadingDotView: UIView = {
let ldv = UIView()
ldv.backgroundColor = .white
ldv.alpha = 0
ldv.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
ldv.layer.cornerRadius = 10
ldv.layer.masksToBounds = true
ldv.translatesAutoresizingMaskIntoConstraints = false
return ldv
}()
returns same object every access so only one appears , make it ( computed property ) to create a new one every access
var loadingDotView: UIView {
let ldv = UIView()
ldv.backgroundColor = .white
ldv.alpha = 0
ldv.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
ldv.layer.cornerRadius = 10
ldv.layer.masksToBounds = true
ldv.translatesAutoresizingMaskIntoConstraints = false
return ldv
}
And add
stackView.spacing = 20
stackView.distribution = .fillEqually