[NT-669, NT-496] Shimmer Loading Extension #980
Conversation
justinswart
changed the title
| @@ -117,6 +121,13 @@ final class PledgeShippingLocationViewController: UIViewController { | |||
| ) | |||
| } | |||
|
|
|||
| self.viewModel.outputs.isLoading | |||
There was a problem hiding this comment.
This output was still dangling but I'll add separate outputs for hiding and showing these.
| } | ||
|
|
||
| extension UIView { | ||
| var shimmersWhenLoading: Bool { |
There was a problem hiding this comment.
Would like to think of a way to not do this to all UIViews.
There was a problem hiding this comment.
Actually a simpler way of doing this is probably just to have the conforming view return an array of views to add the shimmer to. I’ll make that change.
There was a problem hiding this comment.
Agree this would be nicer 👍
There was a problem hiding this comment.
Also the fewer associated objects the better 😅
| override func layoutSubviews() { | ||
| super.layoutSubviews() | ||
|
|
||
| self.layoutGradientLayers() |
There was a problem hiding this comment.
It's always going to be necessary to call this on the ShimmerLoading-conforming view, right?
There was a problem hiding this comment.
Hmm, yeah because we can't override layoutSubviews in an extension 🤔
There was a problem hiding this comment.
Looks good! I think it would be nice not to have to create these sort of shimmer dummy views like PledgeShippingLocationShimmerLoadingView, I wonder if we just set greaterThanOrEqualTo width and height constraints on the views we want the shimmer to appear on if that would be sufficient 🤔
| } | ||
|
|
||
| extension ShimmerLoading where Self: UIView { | ||
| private var isLoading: Bool { |
There was a problem hiding this comment.
Is this private isLoading property really needed, or can we just pass it into updateAnimation directly?
func startLoading() {
self.updateAnimation(isLoading: true)
}
| } | ||
| } | ||
|
|
||
| private func allSubViews(of view: UIView) -> [UIView] { |
There was a problem hiding this comment.
You won't need this if you store var shimmerViews: [UIView] instead right?
| allSubViews(of: self) | ||
| .filter { $0.shimmersWhenLoading } | ||
| .forEach { view in | ||
| let gradientLayer = newGradientLayer(with: view.bounds) |
There was a problem hiding this comment.
Would something like shimmerGradientLayer, shimmerAnimation and shimmerAnimationGroup be clearer naming for these funcs?
| } | ||
|
|
||
| extension UIView { | ||
| var shimmersWhenLoading: Bool { |
There was a problem hiding this comment.
Also the fewer associated objects the better 😅
I'll look into this, it might just mean having to adjust some constraints on the view when it's loading/not loading but yeah that could work! |
|
Going to merge this and look into possibly not using a dummy view separately 👍 |
📲 What
Adds a protocol extension
ShimmerLoadingfor the purpose of adding a shimmering loading state to views.🤔 Why
UIActivityIndicatorView.🛠 How
ShimmerLoadingprotocol extension.startLoading()andstopLoading()functions.UIViews are given a boolean propertyshimmersWhenLoadingwhich, whentrue, means that the shimmering gradient layer is applied to them if their parent conforms toShimmerLoadingandstartLoading()is called.UIViews to have that boolean.PledgeShippingLocationShimmerLoadingViewexample implementation.rootStackViewofPledgeShippingLocationViewControllertoShimmerLoadingand tell it which subviews to apply the shimmer to. While this would work, the shape of the views weren't quite that of the designs so I chose to create a separate view instead.👀 See
✅ Acceptance criteria
To have the view appear for longer add this to line
56ofPledgeShippingLocationViewModel:We will probably want to make this permanent so that the shimmer is not too brief to be jarring.