Main: add activity spinner

2 files changed, 27 insertions, 13 deletions

diff --git a/ios/MullvadVPN/ConnectMainContentView.swift b/ios/MullvadVPN/ConnectMainContentView.swift
index 7c03cb7b0d..40ffdce960 100644
--- a/ios/MullvadVPN/ConnectMainContentView.swift
+++ b/ios/MullvadVPN/ConnectMainContentView.swift
@@ -33,6 +33,15 @@ class ConnectMainContentView: UIView {
     let cityLabel = makeBoldTextLabel(ofSize: 34)
     let countryLabel = makeBoldTextLabel(ofSize: 34)
 
+    let activityIndicator: SpinnerActivityIndicatorView = {
+        let activityIndicator = SpinnerActivityIndicatorView(style: .large)
+        activityIndicator.translatesAutoresizingMaskIntoConstraints = false
+        activityIndicator.tintColor = .white
+        activityIndicator.setContentHuggingPriority(.defaultHigh, for: .horizontal)
+        activityIndicator.setContentCompressionResistancePriority(.defaultHigh, for: .horizontal)
+        return activityIndicator
+    }()
+
     let locationContainerView: UIView = {
         let view = UIView()
         view.translatesAutoresizingMaskIntoConstraints = false
@@ -136,6 +145,7 @@ class ConnectMainContentView: UIView {
         locationContainerView.addSubview(cityLabel)
         locationContainerView.addSubview(countryLabel)
 
+        containerView.addSubview(activityIndicator)
         containerView.addSubview(locationContainerView)
         containerView.addSubview(connectionPanel)
         containerView.addSubview(buttonsStackView)
@@ -152,6 +162,9 @@ class ConnectMainContentView: UIView {
             locationContainerView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
             locationContainerView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
 
+            activityIndicator.centerXAnchor.constraint(equalTo: mapView.centerXAnchor),
+            locationContainerView.topAnchor.constraint(equalTo: activityIndicator.bottomAnchor, constant: 22),
+
             secureLabel.topAnchor.constraint(equalTo: locationContainerView.topAnchor),
             secureLabel.leadingAnchor.constraint(equalTo: locationContainerView.leadingAnchor),
             secureLabel.trailingAnchor.constraint(equalTo: locationContainerView.trailingAnchor),
diff --git a/ios/MullvadVPN/ConnectViewController.swift b/ios/MullvadVPN/ConnectViewController.swift
index b9d5950c15..68ff3cfcec 100644
--- a/ios/MullvadVPN/ConnectViewController.swift
+++ b/ios/MullvadVPN/ConnectViewController.swift
@@ -191,9 +191,19 @@ class ConnectViewController: UIViewController, MKMapViewDelegate, RootContainmen
             comment: ""
         )
 
+        updateActivitySpinner()
         updateTraitDependentViews()
     }
 
+    private func updateActivitySpinner() {
+        switch tunnelState {
+        case .pendingReconnect, .connecting, .reconnecting:
+            mainContentView.activityIndicator.startAnimating()
+        case .connected, .disconnecting, .disconnected:
+            mainContentView.activityIndicator.stopAnimating()
+        }
+    }
+
     private func updateTraitDependentViews() {
         mainContentView.setActionButtons(tunnelState.actionButtons(traitCollection: self.traitCollection))
     }
@@ -241,20 +251,11 @@ class ConnectViewController: UIViewController, MKMapViewDelegate, RootContainmen
     }
 
     private func locationMarkerOffset() -> CGPoint {
-        // The spacing between the secure label and the marker
-        let markerSecureLabelSpacing = CGFloat(22)
-
-        // Compute the secure label's frame within the view coordinate system
-        let secureLabelFrame = mainContentView.secureLabel.convert(mainContentView.secureLabel.bounds, to: view)
-
-        // The marker's center coincides with the geo coordinate
-        let markerAnchorOffsetInPoints = locationMarkerSecureImage.size.height * 0.5
-
-        // Compute the distance from the top of the label's frame to the center of the map
-        let secureLabelDistanceToMapCenterY = secureLabelFrame.minY - mainContentView.mapView.frame.midY
+        // Compute the activity indicator frame within the view coordinate system.
+        let activityIndicatorFrame = mainContentView.activityIndicator.convert(mainContentView.activityIndicator.bounds, to: view)
 
-        // Compute the marker offset needed to position it above the secure label
-        let offsetY = secureLabelDistanceToMapCenterY - markerAnchorOffsetInPoints - markerSecureLabelSpacing
+        // Compute the offset to align the marker on the map with activity indicator.
+        let offsetY = activityIndicatorFrame.midY - mainContentView.mapView.frame.midY
 
         return CGPoint(x: 0, y: offsetY)
     }