Displaying an Activity Indicator while Loading Table View Data in the Background

iOS applications often need to retrieve data from a remote source such as a web service. This data is commonly loaded in the background to avoid blocking the main UI thread, causing the application to appear unresponsive.

While the data is being loaded, an application typically displays an activity indicator view to inform the user that something is happening. Often, this is done by dynamically adding an instance of UIActivityIndicatorView as a subview of either the current view or one of the view's ancestors and making the indicator active. However, if the view is a table or collection view, there is another option: the activity indicator can be set as the view's background view and shown or hidden as needed.

For example, the following code snippet shows a partial implementation of a simple table view controller. The table's data is provided by an array of strings stored in the rows property. The activity indicator is created and assigned as the table's background view in viewDidLoad():

class ViewController: UITableViewController {
    var activityIndicatorView: UIActivityIndicatorView!

    var rows: [String]! = nil

    let cellIdentifier = "cell"
    let dispatchQueue = DispatchQueue(label: "Dispatch Queue", attributes: [], target: nil)

    override func viewDidLoad() {
        super.viewDidLoad()

        title = "Activity Indicator Example"

        activityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray)
        tableView.backgroundView = activityIndicatorView

        tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellIdentifier)
    }

    ...
}

The data is "loaded" in viewWillAppear(). The controller simulates a web service call by sleeping for three seconds in the background, then populating the rows array and reloading the table data on the main thread. The activity indicator is shown while the background operation is executing, and is hidden when the operation is complete. Because table views in the default "plain" style show separator lines even when the table is empty, the controller also sets the table view's separator style to .none so the lines don't interfere with the activity indicator when it is visible:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if (rows == nil) {
        tableView.separatorStyle = UITableViewCellSeparatorStyle.none

        activityIndicatorView.startAnimating()

        dispatchQueue.async {
            Thread.sleep(forTimeInterval: 3)

            OperationQueue.main.addOperation() {
                self.tableView.separatorStyle = UITableViewCellSeparatorStyle.singleLine
                self.activityIndicatorView.stopAnimating()

                self.rows = ["One", "Two", "Three", "Four", "Five"]

                self.tableView.reloadData()
            }
        }
    }
}

Finally, the controller overrides the numberOfSections(in:), tableView(_:numberOfRowsInSection:), and tableView(_:cellForRowAt:) methods to provide the table content. It returns a section count of zero while the data is being loaded, and a count of one once the data is available:

override func numberOfSections(in tableView: UITableView) -> Int {
    return (rows == nil) ? 0 : 1
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return rows.count
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)!

    cell.textLabel!.text = rows[indexPath.row]

    return cell
}

For more ways to simplify iOS app development, please see my projects on GitHub:

  • MarkupKit – Declarative UI for iOS and tvOS
  • HTTP-RPC – Lightweight multi-platform REST

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s