Delay the presentation of the skeletons (#411)

* check if the constraints were modified and then restore the original

* identify constraints added by SkeletonView

* move removal of skeleton constraint to recoverable protocol implementation

README.md

@@ -191,7 +191,7 @@ func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection s
 
 > 📣 **IMPORTANT!** 
 >
-> If you return `SkeletonCollectionDataSource.automaticNumberOfRows` in the above method, it acts like the default behavior (i.e. it calculates how many cells needed to populate the whole tableview).
+> If you return `UITableView.automaticNumberOfSkeletonRows` in the above method, it acts like the default behavior (i.e. it calculates how many cells needed to populate the whole tableview).
 
 There is only one method you need to implement to let Skeleton know the cell identifier. This method doesn't have default implementation:
  ``` swift
@@ -498,10 +498,28 @@ view.isHiddenWhenSkeletonIsActive = true  // This works only when isSkeletonable
 **Don't modify user interaction when the skeleton is active**
 
 
-By default, user interaction is disabled for skeletonized items, but if you don't want to modify the user interaction indicator when skeleton is active, you can use the `isDisableWhenSkeletonIsActive` property:
+By default, the user interaction is disabled for skeletonized items, but if you don't want to modify the user interaction indicator when skeleton is active, you can use the `isUserInteractionDisabledWhenSkeletonIsActive` property:
 
 ```swift
-view.isDisableWhenSkeletonIsActive = false  // The view will be active when the skeleton will be active.
+view.isUserInteractionDisabledWhenSkeletonIsActive = false  // The view will be active when the skeleton will be active.
+```
+
+**Delayed show skeleton**
+
+You can delay the showIf the views are updated quickly you canAn optional delay applied to the transition, like the transition duration.
+
+```swift
+func showSkeleton(usingColor: UIColor,
+                  animated: Bool,
+                  delay: TimeInterval,
+                  transition: SkeletonTransitionStyle)
+```
+
+```swift
+func showGradientSkeleton(usingGradient: SkeletonGradient,
+                          animated: Bool,
+                          delay: TimeInterval,
+                          transition: SkeletonTransitionStyle)
 ```
 
 **Debug**

SkeletonView.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name         = "SkeletonView"
-  s.version      = "1.16.0"
+  s.version      = "1.17.2"
   s.summary      = "An elegant way to show users that something is happening and also prepare them to which contents he is waiting"
   s.description  = <<-DESC
   Today almost all apps have async processes, as API requests, long runing processes, etc. And while the processes are working, usually developers place a loading view to show users that something is going on.

Sources/Collections/CollectionSkeletonProtocol.swift

@@ -31,14 +31,14 @@ extension CollectionSkeleton where Self: UIScrollView {
     func removeDummyDataSource(reloadAfter: Bool) {}
 
     func disableUserInteraction() {
-        if isDisableWhenSkeletonIsActive {
+        if isUserInteractionDisabledWhenSkeletonIsActive {
             isUserInteractionEnabled = false
             isScrollEnabled = false
         }
     }
     
     func enableUserInteraction() {
-        if isDisableWhenSkeletonIsActive {
+        if isUserInteractionDisabledWhenSkeletonIsActive {
             isUserInteractionEnabled = true
             isScrollEnabled = true
         }

Sources/Collections/CollectionViews/SkeletonCollectionViewProtocols.swift

@@ -17,7 +17,7 @@ public protocol SkeletonCollectionViewDataSource: UICollectionViewDataSource {
 
 public extension SkeletonCollectionViewDataSource {
     func collectionSkeletonView(_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
-        return SkeletonCollectionDataSource.automaticNumberOfRows
+        return UICollectionView.automaticNumberOfSkeletonItems
     }
     
     func collectionSkeletonView(_ skeletonView: UICollectionView,

Sources/Collections/CollectionViews/UICollectionView+CollectionSkeleton.swift

@@ -9,6 +9,8 @@
 import UIKit
  
 extension UICollectionView: CollectionSkeleton {
+    public static let automaticNumberOfSkeletonItems = -1
+
     var estimatedNumberOfRows: Int {
         guard let flowlayout = collectionViewLayout as? UICollectionViewFlowLayout else { return 0 }
         switch flowlayout.scrollDirection {

Sources/Collections/SkeletonCollectionDataSource.swift

@@ -11,8 +11,6 @@ import UIKit
 public typealias ReusableCellIdentifier = String
 
 class SkeletonCollectionDataSource: NSObject {
-    static let automaticNumberOfRows = -1
-
     weak var originalTableViewDataSource: SkeletonTableViewDataSource?
     weak var originalCollectionViewDataSource: SkeletonCollectionViewDataSource?
     var rowHeight: CGFloat = 0.0
@@ -40,7 +38,7 @@ extension SkeletonCollectionDataSource: UITableViewDataSource {
 
         let numberOfRows = originalTableViewDataSource.collectionSkeletonView(tableView, numberOfRowsInSection: section)
 
-        if numberOfRows == Self.automaticNumberOfRows {
+        if numberOfRows == UITableView.automaticNumberOfSkeletonRows {
             return tableView.estimatedNumberOfRows
         } else {
             return numberOfRows
@@ -68,7 +66,7 @@ extension SkeletonCollectionDataSource: UICollectionViewDataSource {
 
         let numberOfItems = originalCollectionViewDataSource.collectionSkeletonView(collectionView, numberOfItemsInSection: section)
 
-        if numberOfItems == Self.automaticNumberOfRows {
+        if numberOfItems == UICollectionView.automaticNumberOfSkeletonItems {
             return collectionView.estimatedNumberOfRows
         } else {
             return numberOfItems

Sources/Collections/TableViews/SkeletonTableViewProtocols.swift

@@ -16,7 +16,7 @@ public protocol SkeletonTableViewDataSource: UITableViewDataSource {
 
 public extension SkeletonTableViewDataSource {
     func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int {
-        return SkeletonCollectionDataSource.automaticNumberOfRows
+        return UITableView.automaticNumberOfSkeletonRows
     }
     
     func numSections(in collectionSkeletonView: UITableView) -> Int { return 1 }

Sources/Collections/TableViews/UITableView+CollectionSkeleton.swift

@@ -11,6 +11,8 @@ import UIKit
 public typealias ReusableHeaderFooterIdentifier = String
 
 extension UITableView: CollectionSkeleton {
+    public static let automaticNumberOfSkeletonRows = -1
+
     var estimatedNumberOfRows: Int {
         return Int(ceil(frame.height / rowHeight))
     }

Sources/Extensions/UIView+Autolayout.swift

@@ -12,9 +12,17 @@ extension UIView {
         nonContentSizeLayoutConstraints.filter { $0.firstAttribute == NSLayoutConstraint.Attribute.height }
     }
     
+    var skeletonHeightConstraints: [NSLayoutConstraint] {
+        nonContentSizeLayoutConstraints.filter {
+            $0.firstAttribute == NSLayoutConstraint.Attribute.height
+                && $0.identifier?.contains("SkeletonView.Constraint.Height") ?? false
+        }
+    }
+    
     @discardableResult
     func setHeight(equalToConstant constant: CGFloat) -> NSLayoutConstraint {
         let heightConstraint = heightAnchor.constraint(equalToConstant: constant)
+        heightConstraint.identifier = "SkeletonView.Constraint.Height.\(constant)"
         NSLayoutConstraint.activate([heightConstraint])
         return heightConstraint
     }

Sources/Extensions/UIView+Extension.swift

@@ -16,7 +16,8 @@ enum ViewAssociatedKeys {
     static var buttonViewState = "buttonViewState"
     static var currentSkeletonConfig = "currentSkeletonConfig"
     static var skeletonCornerRadius = "skeletonCornerRadius"
-    static var disableWhenSkeletonIsActive = "disableWhenSkeletonIsActive"
+    static var disabledWhenSkeletonIsActive = "disabledWhenSkeletonIsActive"
+    static var delayedShowSkeletonWorkItem = "delayedShowSkeletonWorkItem"
 }
 // codebeat:enable[TOO_MANY_IVARS]
 
@@ -54,4 +55,9 @@ extension UIView {
     var isSuperviewAStackView: Bool {
         superview is UIStackView
     }
+    
+    var delayedShowSkeletonWorkItem: DispatchWorkItem? {
+        get { return ao_get(pkey: &ViewAssociatedKeys.delayedShowSkeletonWorkItem) as? DispatchWorkItem }
+        set { ao_setOptional(newValue, pkey: &ViewAssociatedKeys.delayedShowSkeletonWorkItem) }
+    }
 }

Sources/Extensions/UIView+IBInspectable.swift

@@ -16,9 +16,9 @@ public extension UIView {
     }
     
     @IBInspectable
-    var isDisableWhenSkeletonIsActive: Bool {
-        get { return disableWhenSkeletonIsActive }
-        set { disableWhenSkeletonIsActive = newValue }
+    var isUserInteractionDisabledWhenSkeletonIsActive: Bool {
+        get { return disabledWhenSkeletonIsActive }
+        set { disabledWhenSkeletonIsActive = newValue }
     }
 
     @IBInspectable
@@ -41,9 +41,9 @@ public extension UIView {
         set { ao_set(newValue, pkey: &ViewAssociatedKeys.hiddenWhenSkeletonIsActive) }
     }
     
-    private var disableWhenSkeletonIsActive: Bool {
-        get { return ao_get(pkey: &ViewAssociatedKeys.disableWhenSkeletonIsActive) as? Bool ?? true }
-        set { ao_set(newValue, pkey: &ViewAssociatedKeys.disableWhenSkeletonIsActive) }
+    private var disabledWhenSkeletonIsActive: Bool {
+        get { return ao_get(pkey: &ViewAssociatedKeys.disabledWhenSkeletonIsActive) as? Bool ?? true }
+        set { ao_set(newValue, pkey: &ViewAssociatedKeys.disabledWhenSkeletonIsActive) }
     }
 
     private var skeletonableCornerRadius: Float {

Sources/Helpers/PrepareForSkeletonProtocol.swift

@@ -10,7 +10,7 @@ import UIKit
 
 extension UIView {
     @objc func prepareViewForSkeleton() {
-        if isDisableWhenSkeletonIsActive {
+        if isUserInteractionDisabledWhenSkeletonIsActive {
             isUserInteractionEnabled = false
         }
         
@@ -22,7 +22,6 @@ extension UIView {
 
 extension UILabel {
     var desiredHeightBasedOnNumberOfLines: CGFloat {
-        let lineHeight = constraintHeight ?? SkeletonAppearance.default.multilineHeight
         let spaceNeededForEachLine = lineHeight * CGFloat(numberOfLines)
         let spaceNeededForSpaces = skeletonLineSpacing * CGFloat(numberOfLines - 1)
         let padding = paddingInsets.top + paddingInsets.bottom
@@ -47,10 +46,7 @@ extension UILabel {
         }
     }
     
-    func restoreBackupHeightConstraints() {
-        heightConstraints.forEach {
-            removeConstraint($0)
-        }
+    func restoreBackupHeightConstraintsIfNeeded() {
         guard !backupHeightConstraints.isEmpty else { return }
         NSLayoutConstraint.activate(backupHeightConstraints)
         backupHeightConstraints.removeAll()
@@ -59,7 +55,7 @@ extension UILabel {
     override func prepareViewForSkeleton() {
         backgroundColor = .clear
         
-        if isDisableWhenSkeletonIsActive {
+        if isUserInteractionDisabledWhenSkeletonIsActive {
             isUserInteractionEnabled = false
         }
         
@@ -75,7 +71,7 @@ extension UITextView {
     override func prepareViewForSkeleton() {
         backgroundColor = .clear
         
-        if isDisableWhenSkeletonIsActive {
+        if isUserInteractionDisabledWhenSkeletonIsActive {
             isUserInteractionEnabled = false
         }
         
@@ -102,7 +98,7 @@ extension UIImageView {
     override func prepareViewForSkeleton() {
         backgroundColor = .clear
         
-        if isDisableWhenSkeletonIsActive {
+        if isUserInteractionDisabledWhenSkeletonIsActive {
             isUserInteractionEnabled = false
         }
         
@@ -116,7 +112,7 @@ extension UIButton {
     override func prepareViewForSkeleton() {
         backgroundColor = .clear
         
-        if isDisableWhenSkeletonIsActive {
+        if isUserInteractionDisabledWhenSkeletonIsActive {
             isUserInteractionEnabled = false
         }
         

Sources/Multilines/ContainsMultilineText.swift

@@ -11,8 +11,8 @@ enum MultilineAssociatedKeys {
 }
 
 protocol ContainsMultilineText {
-    var constraintHeight: CGFloat? { get }
-    var numLines: Int { get }
+    var lineHeight: CGFloat { get }
+    var numberOfLines: Int { get }
     var lastLineFillingPercent: Int { get }
     var multilineCornerRadius: Int { get }
     var multilineSpacing: CGFloat { get }

Sources/Multilines/UILabel+Multiline.swift

@@ -27,15 +27,11 @@ public extension UILabel {
     }
 }
 
-extension UILabel: ContainsMultilineText {
-    var constraintHeight: CGFloat? {
-        backupHeightConstraints.first?.constant
+extension UILabel: ContainsMultilineText {    
+    var lineHeight: CGFloat {
+        backupHeightConstraints.first?.constant ?? SkeletonAppearance.default.multilineHeight
     }
-
-    var numLines: Int {
-        return numberOfLines
-    }
-
+    
     var lastLineFillingPercent: Int {
         get { return ao_get(pkey: &MultilineAssociatedKeys.lastLineFillingPercent) as? Int ?? SkeletonAppearance.default.multilineLastLineFillPercent }
         set { ao_set(newValue, pkey: &MultilineAssociatedKeys.lastLineFillingPercent) }

Sources/Multilines/UITextView+Multiline.swift

@@ -28,11 +28,19 @@ public extension UITextView {
 }
 
 extension UITextView: ContainsMultilineText {
-    var constraintHeight: CGFloat? {
-        heightConstraints.first?.constant
+    var lineHeight: CGFloat {
+        if let fontLineHeight = font?.lineHeight {
+            if let heightConstraints = heightConstraints.first?.constant {
+                return (fontLineHeight > heightConstraints) ? heightConstraints : fontLineHeight
+            }
+            
+            return fontLineHeight
+        }
+        
+        return SkeletonAppearance.default.multilineHeight
     }
     
-    var numLines: Int {
+    var numberOfLines: Int {
         -1
     }
 	

Sources/Recoverable/Recoverable.swift

@@ -32,7 +32,7 @@ extension UIView: Recoverable {
             self.layer.cornerRadius = storedViewState.cornerRadius
             self.layer.masksToBounds = storedViewState.clipToBounds
             
-            if self.isDisableWhenSkeletonIsActive {
+            if self.isUserInteractionDisabledWhenSkeletonIsActive {
                 self.isUserInteractionEnabled = storedViewState.isUserInteractionsEnabled
             }
             
@@ -57,12 +57,16 @@ extension UILabel {
     override func recoverViewState(forced: Bool) {
         super.recoverViewState(forced: forced)
         startTransition { [weak self] in
-            guard let storedLabelState = self?.labelState else { return }
+            guard let self = self,
+                  let storedLabelState = self.labelState else {
+                return
+            }
             
-            self?.restoreBackupHeightConstraints()
+            NSLayoutConstraint.deactivate(self.skeletonHeightConstraints)
+            self.restoreBackupHeightConstraintsIfNeeded()
             
-            if self?.textColor == .clear || forced {
-                self?.textColor = storedLabelState.textColor
+            if self.textColor == .clear || forced {
+                self.textColor = storedLabelState.textColor
             }
         }
     }

Sources/SkeletonLayer.swift

@@ -83,9 +83,8 @@ struct SkeletonLayer {
     /// If there is more than one line, or custom preferences have been set for a single line, draw custom layers
     func addTextLinesIfNeeded() {
         guard let textView = holderAsTextView else { return }
-        let lineHeight = textView.constraintHeight ?? SkeletonAppearance.default.multilineHeight
-        let config = SkeletonMultilinesLayerConfig(lines: textView.numLines,
-                                                   lineHeight: lineHeight,
+        let config = SkeletonMultilinesLayerConfig(lines: textView.numberOfLines,
+                                                   lineHeight: textView.lineHeight,
                                                    type: type,
                                                    lastLineFillPercent: textView.lastLineFillingPercent,
                                                    multilineCornerRadius: textView.multilineCornerRadius,
@@ -98,9 +97,8 @@ struct SkeletonLayer {
     
     func updateLinesIfNeeded() {
         guard let textView = holderAsTextView else { return }
-        let lineHeight = textView.constraintHeight ?? SkeletonAppearance.default.multilineHeight
-        let config = SkeletonMultilinesLayerConfig(lines: textView.numLines,
-                                                   lineHeight: lineHeight,
+        let config = SkeletonMultilinesLayerConfig(lines: textView.numberOfLines,
+                                                   lineHeight: textView.lineHeight,
                                                    type: type,
                                                    lastLineFillPercent: textView.lastLineFillingPercent,
                                                    multilineCornerRadius: textView.multilineCornerRadius,
@@ -113,7 +111,7 @@ struct SkeletonLayer {
     
     var holderAsTextView: ContainsMultilineText? {
         guard let textView = holder as? ContainsMultilineText,
-            (textView.numLines == -1 || textView.numLines == 0 || textView.numLines > 1 || textView.numLines == 1 && !SkeletonAppearance.default.renderSingleLineAsView) else {
+            (textView.numberOfLines == -1 || textView.numberOfLines == 0 || textView.numberOfLines > 1 || textView.numberOfLines == 1 && !SkeletonAppearance.default.renderSingleLineAsView) else {
                 return nil
         }
         return textView

Sources/SkeletonView.swift

@@ -9,20 +9,63 @@ public extension UIView {
     ///   - color: The color of the skeleton. Defaults to `SkeletonAppearance.default.tintColor`.
     ///   - transition: The style of the transition when the skeleton appears. Defaults to `.crossDissolve(0.25)`.
     func showSkeleton(usingColor color: UIColor = SkeletonAppearance.default.tintColor, transition: SkeletonTransitionStyle = .crossDissolve(0.25)) {
+        delayedShowSkeletonWorkItem?.cancel()
         let config = SkeletonConfig(type: .solid, colors: [color], transition: transition)
         showSkeleton(skeletonConfig: config)
     }
     
+    /// Shows the skeleton using the view that calls this method as root view.
+    ///
+    /// - Parameters:
+    ///   - color: The color of the skeleton. Defaults to `SkeletonAppearance.default.tintColor`.
+    ///   - animated: If the skeleton is animated or not. Defaults to `true`.
+    ///   - delay: The amount of time (measured in seconds) to wait before show the skeleton.
+    ///   - transition: The style of the transition when the skeleton appears. Defaults to `.crossDissolve(0.25)`.
+    func showSkeleton(usingColor color: UIColor = SkeletonAppearance.default.tintColor, animated: Bool = true, delay: TimeInterval, transition: SkeletonTransitionStyle = .crossDissolve(0.25)) {
+        delayedShowSkeletonWorkItem?.cancel()
+        
+        delayedShowSkeletonWorkItem = DispatchWorkItem { [weak self] in
+            let config = SkeletonConfig(type: .solid, colors: [color], animated: animated, transition: transition)
+            self?.showSkeleton(skeletonConfig: config)
+        }
+        
+        DispatchQueue.main.asyncAfter(deadline: .now() + delay, execute: delayedShowSkeletonWorkItem!)
+    }
+    
     /// Shows the gradient skeleton without animation using the view that calls this method as root view.
     ///
     /// - Parameters:
     ///   - gradient: The gradient of the skeleton. Defaults to `SkeletonAppearance.default.gradient`.
     ///   - transition: The style of the transition when the skeleton appears. Defaults to `.crossDissolve(0.25)`.
     func showGradientSkeleton(usingGradient gradient: SkeletonGradient = SkeletonAppearance.default.gradient, transition: SkeletonTransitionStyle = .crossDissolve(0.25)) {
+        delayedShowSkeletonWorkItem?.cancel()
         let config = SkeletonConfig(type: .gradient, colors: gradient.colors, transition: transition)
         showSkeleton(skeletonConfig: config)
     }
     
+    /// Shows the gradient skeleton using the view that calls this method as root view.
+    ///
+    /// - Parameters:
+    ///   - gradient: The gradient of the skeleton. Defaults to `SkeletonAppearance.default.gradient`.
+    ///   - animated: If the skeleton is animated or not. Defaults to `true`.
+    ///   - delay: The amount of time (measured in seconds) to wait before show the skeleton.
+    ///   - transition: The style of the transition when the skeleton appears. Defaults to `.crossDissolve(0.25)`.
+    func showGradientSkeleton(
+        usingGradient gradient: SkeletonGradient = SkeletonAppearance.default.gradient,
+        animated: Bool = true,
+        delay: TimeInterval,
+        transition: SkeletonTransitionStyle = .crossDissolve(0.25)
+    ) {
+        delayedShowSkeletonWorkItem?.cancel()
+        
+        delayedShowSkeletonWorkItem = DispatchWorkItem { [weak self] in
+            let config = SkeletonConfig(type: .gradient, colors: gradient.colors, animated: animated, transition: transition)
+            self?.showSkeleton(skeletonConfig: config)
+        }
+        
+        DispatchQueue.main.asyncAfter(deadline: .now() + delay, execute: delayedShowSkeletonWorkItem!)
+    }
+    
     /// Shows the animated skeleton using the view that calls this method as root view.
     ///
     /// If animation is nil, sliding animation will be used, with direction left to right.
@@ -32,6 +75,7 @@ public extension UIView {
     ///   - animation: The animation of the skeleton. Defaults to `nil`.
     ///   - transition: The style of the transition when the skeleton appears. Defaults to `.crossDissolve(0.25)`.
     func showAnimatedSkeleton(usingColor color: UIColor = SkeletonAppearance.default.tintColor, animation: SkeletonLayerAnimation? = nil, transition: SkeletonTransitionStyle = .crossDissolve(0.25)) {
+        delayedShowSkeletonWorkItem?.cancel()
         let config = SkeletonConfig(type: .solid, colors: [color], animated: true, animation: animation, transition: transition)
         showSkeleton(skeletonConfig: config)
     }
@@ -45,6 +89,7 @@ public extension UIView {
     ///   - animation: The animation of the skeleton. Defaults to `nil`.
     ///   - transition: The style of the transition when the skeleton appears. Defaults to `.crossDissolve(0.25)`.
     func showAnimatedGradientSkeleton(usingGradient gradient: SkeletonGradient = SkeletonAppearance.default.gradient, animation: SkeletonLayerAnimation? = nil, transition: SkeletonTransitionStyle = .crossDissolve(0.25)) {
+        delayedShowSkeletonWorkItem?.cancel()
         let config = SkeletonConfig(type: .gradient, colors: gradient.colors, animated: true, animation: animation, transition: transition)
         showSkeleton(skeletonConfig: config)
     }
@@ -75,6 +120,7 @@ public extension UIView {
     }
     
     func hideSkeleton(reloadDataAfter reload: Bool = true, transition: SkeletonTransitionStyle = .crossDissolve(0.25)) {
+        delayedShowSkeletonWorkItem?.cancel()
         flowDelegate?.willBeginHidingSkeletons(rootView: self)
         recursiveHideSkeleton(reloadDataAfter: reload, transition: transition, root: self)
     }
@@ -277,14 +323,22 @@ extension UIView {
             .setHolder(self)
             .build()
             else { return }
-
+        
         self.skeletonLayer = skeletonLayer
-        layer.insertSublayer(skeletonLayer,
-                             at: UInt32.max,
-                             transition: config.transition) { [weak self] in
-                                if config.animated {
-                                    self?.startSkeletonAnimation(config.animation)
-                                }
+        layer.insertSkeletonLayer(
+            skeletonLayer,
+            atIndex: UInt32.max,
+            transition: config.transition
+        ) { [weak self] in
+            guard let self = self else { return }
+            
+            /// Workaround to fix the problem when inserting a sublayer and
+            /// the content offset is modified by the system.
+            (self as? UITextView)?.setContentOffset(.zero, animated: false)
+            
+            if config.animated {
+                self.startSkeletonAnimation(config.animation)
+            }
         }
         status = .on
     }

Sources/Transitions/UIView+Transitions.swift

@@ -3,13 +3,13 @@
 import UIKit
 
 extension CALayer {
-    func insertSublayer(_ layer: SkeletonLayer, at idx: UInt32, transition: SkeletonTransitionStyle, completion: (() -> Void)? = nil) {
-        insertSublayer(layer.contentLayer, at: idx)
+    func insertSkeletonLayer(_ sublayer: SkeletonLayer, atIndex index: UInt32, transition: SkeletonTransitionStyle, completion: (() -> Void)? = nil) {
+        insertSublayer(sublayer.contentLayer, at: index)
         switch transition {
         case .none:
             completion?()
         case .crossDissolve(let duration):
-			layer.contentLayer.setOpacity(from: 0, to: 1, duration: duration, completion: completion)
+            sublayer.contentLayer.setOpacity(from: 0, to: 1, duration: duration, completion: completion)
         }
     }
 }