How to add activity Indicator to center of webView - swift

Question

With this code I get indicator but to top left corner of webView and behind borders
(I have DetailView storyboard but want to write code programmatically)
var webView = WKWebView()
var detailItem : CountriesFinal?
var spinner = UIActivityIndicatorView()
override func viewDidLoad() {
super.viewDidLoad()
spinner.frame = CGRect(x: webView.frame.width / 2, y: webView.frame.height / 2, width: 10, height: 10)
webView.addSubview(spinner)
spinner.startAnimating()
spinner.hidesWhenStopped = true
webView.backgroundColor = .blue
webView.translatesAutoresizingMaskIntoConstraints = false
webView.navigationDelegate = self
webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
webView.layer.borderWidth = 5
webView.layer.borderColor = UIColor.red.cgColor
webView.contentMode = .scaleAspectFit
webView.backgroundColor = .blue
self.view.addSubview(webView)
I notice that this line doesn't change anything and I thought it may be the solution:
spinner.frame = CGRect(x: webView.frame.width / 2, y: webView.frame.height / 2, width: 10, height: 10)
I've tried to set translatesAutoresizingMaskIntoConstraints of spinner to false but then whole webView disappear with purple warning " Layout Issues: Position and size are ambiguous for WKWebView."
UPDATED CODE(webVIew not showing):
webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
webView.backgroundColor = .blue
webView.translatesAutoresizingMaskIntoConstraints = false
webView.navigationDelegate = self
webView.layer.borderWidth = 5
webView.layer.borderColor = UIColor.red.cgColor
webView.contentMode = .scaleAspectFit
webView.backgroundColor = .blue
self.view.addSubview(webView)
self.view.insertSubview(spinner, aboveSubview: webView)
spinner.centerXAnchor.constraint(equalTo: webView.centerXAnchor).isActive = true
spinner.centerYAnchor.constraint(equalTo: webView.centerYAnchor).isActive = true
spinner.startAnimating()
spinner.hidesWhenStopped = true

Answer 1

In my opinion WKWebView is one of the system views that should probably be a "leaf" in your view hiercarchy. It is very complex in the content it manages and may not like it if you add subviews.
Instead of putting the spinner inside the WKWebView, I would probably put it into a view that is a sibling and stack it in front of the WebView in the z-order. It will float above the web view, but look like it is inside of it.
Here's a Playground I threw together that demonstrates the idea:
import UIKit
import WebKit
import PlaygroundSupport
NSSetUncaughtExceptionHandler { error in
debugPrint(error)
}
let controller = UIViewController()
let webView = WKWebView()
webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
webView.load(URLRequest(url: URL(string: "https://www.apple.com")!))
let spinner = UIActivityIndicatorView()
spinner.translatesAutoresizingMaskIntoConstraints = false
controller.view.addSubview(webView)
webView.frame = controller.view.bounds
controller.view.insertSubview(spinner, aboveSubview: webView)
spinner.centerXAnchor.constraint(equalTo: webView.centerXAnchor).isActive = true
spinner.centerYAnchor.constraint(equalTo: webView.centerYAnchor).isActive = true
PlaygroundSupport.PlaygroundPage.current.liveView = controller
spinner.startAnimating()

Answer 2

Working code. Changed place of addSubview
webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
webView.backgroundColor = .blue
webView.translatesAutoresizingMaskIntoConstraints = false
webView.layer.borderWidth = 5
webView.layer.borderColor = UIColor.red.cgColor
webView.contentMode = .scaleAspectFit
webView.backgroundColor = .blue
self.view.addSubview(webView)
self.webView.addSubview(self.spinner)//first we need to add subview then make center or something
spinner.center = CGPoint(x: webView.bounds.width / 2, y: webView.bounds.height / 2)
webView.navigationDelegate = self
spinner.startAnimating()
spinner.hidesWhenStopped = true