12.5.2. Progress Activity Indicator

If you noticed, when we clicked on the Register button, the UI was stuck for a few seconds as we were waiting for the create user operation to complete. In these cases, the user may get confused if we do not give the users a cue that the backend is working on their request. So we want to implement a loading screen with a progress indicator so that the user can understand the app is working in the backend to complete their request. Like this:

Defining a Progress Activity Indicator

We will use a UI element in iOS called UIActivityIndicatorView to display the loading screen. Since we may reuse the same UIActivityIndicatorView for multiple backend tasks, we will write separate code to create the instance of it.

Let's create a new group called 'Progress Indicator' in the files navigator of Xcode. Then add two files in the group: ProgressSpinnerViewController.swift and ProgressSpinnerDelegate.swift.

ProgressSpinnerViewController.swift

Let's open ProgressSpinnerViewController.swift file and put the following code there:

//
//  ProgressSpinnerViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import UIKit

class ProgressSpinnerViewController: UIViewController {
    
    var activityIndicator: UIActivityIndicatorView!

    override func viewDidLoad() {
        super.viewDidLoad()
        activityIndicator = UIActivityIndicatorView(style: .large)
        activityIndicator.color = .orange
        activityIndicator.translatesAutoresizingMaskIntoConstraints = false
        activityIndicator.startAnimating()
        
        view.backgroundColor = UIColor.lightGray.withAlphaComponent(0.25)
        view.addSubview(activityIndicator)
        
        activityIndicator.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        activityIndicator.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        
    }

}

In the above code:

• On line 12, we declare a variable of type UIActivityIndicatorView.

• On line 16, we create the instance of the indicator view and define its style as large. You can play with multiple different styles.

• On line 17, we define the color of the indicator as orange. (Yes, a weird choice, you can define any color you want to).

• On line 19, we say when this indicator view is loaded, start the 'loading' animation.

• We set the background color on lines 21 through 22 and attached the indicator to the current view.

• Then we anchor the indicator to the center of the screen.

Now that we set up the indicator view, we must define a protocol to control it from other screens.

ProgressSpinnerDelegate.swift

Let's open ProgressSpinnerDelegate.swift file and put the following protocol there:

//
//  ProgressSpinnerDelegate.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation

protocol ProgressSpinnerDelegate{
    func showActivityIndicator()
    func hideActivityIndicator()
}

So any class that wants to display the progress indicator view, must adopt ProgressSpinnerDelegate protocol and define the following two methods:

• showActivityIndicator()

• hideActivityIndicator()

Displaying the Progress Indicator View while Registering a User

In our case, when a user clicks on the register button, the app should display the indicator view, and when the user is created, and their profile is updated, we will remove it.

We need to do a few tasks.

First, open the 'RegisterViewController.swift' file.

Create an instance of ProgressSpinnerViewController.

//
//  RegisterViewController.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

//codes omitted...

class RegisterViewController: UIViewController {
    
    //codes omitted...
    let childProgressView = ProgressSpinnerViewController()
    
    //codes omitted...
}

Secondly, let's create a new file, 'RegisterProgressIndicatorManager.swift' in the 'Register Screen' group.

Add the following code there:

//
//  RegisterProgressIndicatorManager.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation

extension RegisterViewController:ProgressSpinnerDelegate{
    func showActivityIndicator(){
        addChild(childProgressView)
        view.addSubview(childProgressView.view)
        childProgressView.didMove(toParent: self)
    }
    
    func hideActivityIndicator(){
        childProgressView.willMove(toParent: nil)
        childProgressView.view.removeFromSuperview()
        childProgressView.removeFromParent()
    }
}

In the above code, we adopt the ProgressSpinnerDelegate protocol and define the show and hide methods.

• In the showActivityIndicator() method:

  • We add the indicator as a child view of the current view on lines 12 and 13.

  • Then we call didMove(toParent: self) method to attach and display the indicator on top of the current view.

• In the hideActivityIndicator() method:

  • We detach the indicator on line 18.

  • Then we remove the indicator views from their parent on lines 19 and 20.

Thirdly, edit RegisterFirebaseManager.swift file

Remember the sequence of showing the progress indicator view?

• When a user clicks on the register button, the app should display the indicator view.

• And when the user is created and their profile is updated, we will remove it.

Where do we handle those tasks? - In RegisterFirebaseManager.swift file, right?

So let's edit the RegisterFirebaseManager.swift file and add a couple of lines like the following:

//
//  RegisterFirebaseManager.swift
//  App12
//
//  Created by Sakib Miazi on 6/2/23.
//

import Foundation
import FirebaseAuth

extension RegisterViewController{
    
    func registerNewAccount(){
        //MARK: display the progress indicator...
        showActivityIndicator()
        //MARK: create a Firebase user with email and password...
        if let name = registerView.textFieldName.text,
           let email = registerView.textFieldEmail.text,
           let password = registerView.textFieldPassword.text{
            //Validations....
            Auth.auth().createUser(withEmail: email, password: password, completion: {result, error in
                if error == nil{
                    //MARK: the user creation is successful...
                    self.setNameOfTheUserInFirebaseAuth(name: name)
                }else{
                    //MARK: there is a error creating the user...
                    print(error)
                }
            })
        }
    }
    
    //MARK: We set the name of the user after we create the account...
    func setNameOfTheUserInFirebaseAuth(name: String){
        let changeRequest = Auth.auth().currentUser?.createProfileChangeRequest()
        changeRequest?.displayName = name
        changeRequest?.commitChanges(completion: {(error) in
            if error == nil{
                //MARK: the profile update is successful...
                
                //MARK: hide the progress indicator...
                self.hideActivityIndicator()
                
                //MARK: pop the current controller...
                self.navigationController?.popViewController(animated: true)
            }else{
                //MARK: there was an error updating the profile...
                print("Error occured: \(String(describing: error))")
            }
        })
    }
}

In the above code:

• On line 15, before we start creating the request for creating a user, we show the progress indicator.

• Online 42, after the profile update is done, we hide the progress indicator.

If you run the application now, you will see that the progress indicator is working!