Showing a progress HUD

Overview

In mobile apps, it’s helpful to give the user an indication that content is being loaded while the app sends a network request to get new data. A common method is to use a Progress HUD (Heads Up Display) while fetching the data. We can install a library that provides us with a convenient way to show a loading indicator while our network request is pending. In this guide we’ll use MBProgressHUD, a popular drop-in HUD library.

Note: If your app uses SwiftUI and targets iOS 14 or later, the built-in ProgressView shows a loading indicator with no third-party library needed. MBProgressHUD remains handy in UIKit view controllers like the example below.

Sample Progress HUD

Installing MBProgressHUD with Swift Package Manager

The simplest way to add MBProgressHUD to your project is with Swift Package Manager, which is built into Xcode. Select File -> Add Package Dependencies..., paste the repository URL https://github.com/jdg/MBProgressHUD into the search field, and add the MBProgressHUD library product to your app target. See the project README for the current release and the full list of supported install methods.

Alternative: Installing with CocoaPods

If your project already manages dependencies with CocoaPods, edit your Podfile to include the pod:

pod 'MBProgressHUD'

Since we did not specify a version or target platform, CocoaPods will resolve the latest published version and infer the platform from what was already defined in your project. Then we download the package and incorporate it into our project with the following commands in the Terminal:

pod install && open *.xcworkspace

Tip: the above is a shorthand to load up your new workspace in one line.

Adding the Progress HUD

Finally we update our View Controller to display the progress HUD
while our network request is pending and dismiss the HUD once we receive
a response.

NOTE: The below code shows the implementation of the Progress HUD in a sample network request. If your aim is to add the Progress HUD to an existing network request already in your project, you will only need to add MBProgressHUD.showAdded(to: self.view, animated: true) at the beginning of the request and MBProgressHUD.hide(for: self.view, animated: true) in the completion handler

import UIKit
import MBProgressHUD

class ViewController: UIViewController {

    // ...

    func loadDataFromNetwork() {

        // ... Create the URLRequest (myRequest) ...

        // Configure session so that completion handler is executed on main UI thread
        let session = URLSession(
            configuration: URLSessionConfiguration.default,
            delegate: nil,
            delegateQueue: OperationQueue.main
        )

        // Display HUD right before the request is made
        MBProgressHUD.showAdded(to: self.view, animated: true)

        let task: URLSessionDataTask = session.dataTask(with: myRequest) { (data, response, error) in

            // Hide HUD once the network request comes back (must be done on main UI thread)
            MBProgressHUD.hide(for: self.view, animated: true)

            // ... Remainder of response handling code ...

        }
        task.resume()
    }
}