Custom UIRefreshControl content not showing gradually

I have created a custom view and adding it as a subview inside my scroll view's refresh control, like so:

private func configureRefreshControl() {
     scrollView.refreshControl = UIRefreshControl()
     let refreshContents = BaseRefreshControl.loadFromNib()
     refreshContents.frame = scrollView.refreshControl!.bounds
     self.refreshControl = refreshContents
     scrollView.refreshControl?.tintColor = .clear
     scrollView.refreshControl?.backgroundColor = .blue
     scrollView.refreshControl?.addSubview(refreshContents)
}

My BaseRefreshControl is basically a .xib file containing a UIView and a UILabel centered in that UIView.

As you may know, when you pull down your scrollView to refresh the content, it gradually opens (much like a slow animation). However, what I found to be strange is that whenever I pull down to refresh, my UILabel is showing before the center part of the UIView has shown.

So what I have is something like this, if I may:

   ---------------------------
   --                       --
   -- --------------------- --
   --       MyLabel         --
   --                       --

The upper part is my UIRefreshControl which has gradually started showing. 'MyLabel' is showing and overlapping elements of the View Controller underneath. I want the label to appear only when that part of the UIRefreshControl has shown, only when the UIView has completely appeared.

Seems like the solution is simply:

scrollView.refreshControl?.clipsToBounds = true

Hope this helps someone in the future!