Skip to content

Showing a progress HUD

Eddie Freeman edited this page Jan 15, 2016 · 10 revisions

We've created an app from the table view guide and call a REST API. To give the user some indication of the app loading content we'd like to include a progress HUD while fetching the latest stories. We can use CocoaPods to install a package that provides us with a convenient way to show a loading indicator while our network request is pending and dismiss the indicator once we are fully loaded.

Setting Up the Podfile

Since this project previously did not use CocoaPods, use pod init to create a template Podfile. It should contain some lines at the top, lets uncomment them so they look like below:

platform :ios, "8.0"
use_frameworks!

This tells CocoaPods that your project is targeting iOS 8.0 and will be using frameworks instead of static libraries heading toward a more complex Podfile that works with Swift.

You could also include the line below to supress any warnings from Pods we install if you're getting a lot of noise from them:

inhibit_all_warnings!

Installing the Pod

Next navigate to the CocoaPods website where they have a directory of different PodSpecs.

search-blank

A quick search for "Progress" or "Loading" finds us a few different Pods we could use, in this case we're going to install MBProgressHUD.

search-progress

Edit your Podfile to include the new Pod we found:

pod 'MBProgressHUD'

Notice that since we did not specify a target platform, CocoaPods will infer this from what was already defined in our 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.

import UIKit

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!
    var stories: [Story] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        fetchStories()
    }

    func fetchStories() {
        MBProgressHUD.showHUDAddedTo(self.view, animated: true)
        Story.fetchStories({ (stories: [Story]) -> Void in
            dispatch_async(dispatch_get_main_queue(), {
                self.stories = stories
                self.tableView.reloadData()
                MBProgressHUD.hideHUDForView(self.view, animated: true)
            })
        }, error: nil)
    }
}

Progress HUD

Clone this wiki locally