The current RecoverableButtonViewState model only works for very simple buttons where just the title is defined. This means that on more complex scenarios buttons aren't properly "prepared" to enter skeleton mode and remain visible for a while until they are covered with the skeleton layer, where the remaining elements are already in skeleton mode (e.g. labels). Furthermore, when configuring styling on buttons they reorder subviews/sublayers so that the skeleton layer didn't always show on top.
Same thing is true if layer.borderColor is non-nil - the border can be seen for a while until the skeleton layer covers it.
Additionally, using SkeletonTransitionStyle.none would still allow animations to be performed if any change done in
prepareViewForSkeleton triggers a layout pass. This is especially noticeable when pushing a screen in a navigation controller and enabling skeleton mode in viewDidLoad.
Changes
Add state, attributedTitle, titleColor, image and backgroundImage to RecoverableButtonViewState, clear them on prepareViewForSkeleton and recover them on recoverViewState (according to state).
Set the SkeletonLayer.maskLayer's zPosition to Float.greatestFiniteMagnitude so that it always sits on top of the view's content.
Add borderColor to RecoverableViewState, clear it on prepareViewForSkeleton and recover it in recoverViewState.
Wrap startTransition block in a UIView.performWithoutAnimation when SkeletonTransitionStyle.none.
Remove DispatchQueue.main usage in CALayer animation extensions, as they cause animations to become out of sync with other UI events/animations like navigation pushes and/or other elements that are animated while skeleton is being shown/hidden. Removing them ensures better animation ordering/orchestration.
Summary
The current
RecoverableButtonViewStatemodel only works for very simple buttons where just the title is defined. This means that on more complex scenarios buttons aren't properly "prepared" to enter skeleton mode and remain visible for a while until they are covered with the skeleton layer, where the remaining elements are already in skeleton mode (e.g. labels). Furthermore, when configuring styling on buttons they reorder subviews/sublayers so that the skeleton layer didn't always show on top.Same thing is true if
layer.borderColoris non-nil - the border can be seen for a while until the skeleton layer covers it.Additionally, using
SkeletonTransitionStyle.nonewould still allow animations to be performed if any change done inprepareViewForSkeletontriggers a layout pass. This is especially noticeable when pushing a screen in a navigation controller and enabling skeleton mode inviewDidLoad.Changes
Add
state,attributedTitle,titleColor,imageandbackgroundImagetoRecoverableButtonViewState, clear them onprepareViewForSkeletonand recover them onrecoverViewState(according tostate).Set the
SkeletonLayer.maskLayer'szPositiontoFloat.greatestFiniteMagnitudeso that it always sits on top of the view's content.Add
borderColortoRecoverableViewState, clear it onprepareViewForSkeletonand recover it inrecoverViewState.Wrap
startTransitionblock in aUIView.performWithoutAnimationwhenSkeletonTransitionStyle.none.Remove
DispatchQueue.mainusage inCALayeranimation extensions, as they cause animations to become out of sync with other UI events/animations like navigation pushes and/or other elements that are animated while skeleton is being shown/hidden. Removing them ensures better animation ordering/orchestration.Demo
https://user-images.githubusercontent.com/1391324/202869650-e0f87962-f7a7-451e-b218-64d54b9cb86b.mov
https://user-images.githubusercontent.com/1391324/202869594-e5bc47c6-0687-4fcc-9c54-103919b6a1d4.mov
Requirements