Add a ActivityIndicator to the bottom of UITableView while loading

Question

I want to add a ActivityIndicator to the bottom of my UITableView when the last cell is displayed, while I'm fetching more data, then when the data got fetched hide it.

So I scroll to the bottom -> last row displayed -> spinner starts spinning while data is fetched -> Data fetched, hide the spinner -> new data added to the tableview.

Any tips on how can I achieve this?

Thanks ;)

score 70 · Accepted Answer · edited Jul 21 '17 at 13:10

70

Add This Function

 func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    let lastSectionIndex = tableView.numberOfSections - 1
    let lastRowIndex = tableView.numberOfRows(inSection: lastSectionIndex) - 1
    if indexPath.section ==  lastSectionIndex && indexPath.row == lastRowIndex {
       // print("this is the last cell")
        let spinner = UIActivityIndicatorView(activityIndicatorStyle: .gray)
        spinner.startAnimating()
        spinner.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: tableView.bounds.width, height: CGFloat(44))

        self.tableview.tableFooterView = spinner
        self.tableview.tableFooterView?.isHidden = false
    }
}

and tableFooterView should hide when data load.

edited Jul 21 '17 at 13:10

LeoGalante

747
6
14

answered Feb 25 '17 at 14:53

AyAz

2,027
2
21
28

2

Never use fix size values, because of different screen sizes – Lukas Würzburger Feb 25 '17 at 14:55
What is tableView_category? – Lukas Würzburger Feb 25 '17 at 14:58
the tableview_category is your default tableView which contains the rows. I got that and this example worked like a charm – Ivan Cantarino Feb 25 '17 at 15:01
3

it works but loading is not stop when reached at the end – Muhammad Zeshan Mazhar Oct 27 '17 at 12:29
1

loading is not getting stopped when it is at bottom, thus run service multiple times – A.s.ALI Mar 21 '19 at 13:37

score 15 · Answer 2 · edited Apr 30 '21 at 04:51

15

Swift 5

 func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    let lastSectionIndex = tableView.numberOfSections - 1
    let lastRowIndex = tableView.numberOfRows(inSection: lastSectionIndex) - 1
    if indexPath.section ==  lastSectionIndex && indexPath.row == lastRowIndex {
       // print("this is the last cell")
        let spinner = UIActivityIndicatorView(style: .medium)
        spinner.startAnimating()
        spinner.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: tableView.bounds.width, height: CGFloat(44))

        self.tableview.tableFooterView = spinner
        self.tableview.tableFooterView?.isHidden = false
    }
}

edited Apr 30 '21 at 04:51

Imran Rasheed

825
10
25

answered Aug 01 '18 at 09:35

Sachin Rasane

1,501
12
17

Worked like a charm – Zim Nov 19 '21 at 01:29
Add these two lines, when you the data loads -- self.tableView.tableFooterView?.isHidden = true self.tableView.tableFooterView = nil – Shivam Garg May 23 '22 at 16:41

score 9 · Answer 3 · answered Jan 30 '20 at 10:53

Update 2020 Swift 5, Xcode 11

I used @Ayaz Akbar's solution and it worked like charm. It just needed some improvements. Here is how I adopted it to my needs.

Removing the loading indicator if no more items to load

Since you are adding the loading indicator every time you go to the end of the items there will be the case where you no longer add new items to the table view data source. At this point you need to remove the loading indicator. I am using a custom UITableViewDataSource which calls its completion handler every time new data is received. I also keep a var newCount to keep track of the new items count. So here is what I do in my view controller to hide the activity indicator:

private lazy var dataSource: CustomTableViewDataSource = {
    return CustomTableViewDataSource(query: CustomQuery) { [unowned self] (result) in
    // For the initial load I needed a standard activity indicator in the center of the screen
    self.stopMainActivityIndicatorIfNeeded()

    switch result {
    case .success(()):
        if self.dataSource.newCount > 0 {
            self.tableView.reloadData()
        } else {
            // Hide the tableFooterView, respectively the activity indicator
            self.tableView.tableFooterView = nil
        }
    case .failure(let error):
        self.showError(error)
    }
    }
}()

Here is my updated UITableView delegate method:

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    let lastSectionIndex = tableView.numberOfSections - 1
    let lastRowIndex = tableView.numberOfRows(inSection: lastSectionIndex) - 1
    if indexPath.section ==  lastSectionIndex && indexPath.row == lastRowIndex && dataSource.newCount > 0 {
        let spinner = UIActivityIndicatorView(style: .gray)
        spinner.frame = CGRect(x: 0.0, y: 0.0, width: tableView.bounds.width, height: 70)
        spinner.startAnimating()
        tableView.tableFooterView = spinner
    }
}

What is going on in the initializer `CustomTableViewDataSource(query: CustomQuery)`? Maybe you could add the code for CustomTableViewDataSource in your answer? — Knut Valen, Feb 05 '20 at 09:33
The initializer is something like this? `init(query: CustomQuery, completionHandler: @escaping (Result<(), Error>) -> Void) { ... }` — Knut Valen, Feb 05 '20 at 09:58
Something similar. Just adjust `Result` enum to your needs. My completion handler looks like this: `@escaping (Result) -> Void`. If you would like to learn more about this technique and the data source check this out: https://codelabs.developers.google.com/codelabs/firebase-cloud-firestore-workshop-swift/#4 — Vasil Garov, Feb 05 '20 at 10:09
I needed to change it to `@escaping (Result) -> Void` to not get syntax errors. — Knut Valen, Feb 05 '20 at 10:17

score 2 · Answer 4 · answered Feb 25 '17 at 14:42

2

One way would be to add a custom cell with a UIActivityIndicatorView in it. You could put it in a separate section. There are many ways to do it.

Or you check this out: https://github.com/evnaz/ENFooterActivityIndicatorView

answered Feb 25 '17 at 14:42

Lukas Würzburger

6,543
7
41
75

I'll give it a look – Ivan Cantarino Feb 25 '17 at 14:42
3

I wouldn't like to use a third-party library just for that, and the given example is written in Obj-C – Ivan Cantarino Feb 25 '17 at 14:49
3

You don't have to use it. You can just check it out to know how it works and write it in swift if you need to. – Lukas Würzburger Feb 25 '17 at 14:53

Sumona Salma · Answer 5 · 2019-04-22T14:06:37.283

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    let total = (self.array.count )
    if (indexPath.item + 1) == (self.array.count ){
        self.limit = Int(self.limit+20) // table item render limit
        if total < limit {
            let spinner = UIActivityIndicatorView(style: .gray)
            spinner.startAnimating()
            spinner.frame = CGRect(x: CGFloat(0), y: CGFloat(0), width: tableView.bounds.width, height: CGFloat(44))

            self.myTableView.tableFooterView = spinner
            self.myTableView.tableFooterView?.isHidden = false
        }
    }
}

score 0 · Answer 6 · answered Jan 07 '21 at 08:25

You can add subview to UITableView and show it when user scrolls to bottom.

I had to implement same thing on multiple UIScrollViews and ended up creating a DSL for it.

Also created a pod
You can take a look at the source code or use the pod if you want.

https://github.com/salmaanahmed/PullToRefreshDSL

Add a ActivityIndicator to the bottom of UITableView while loading

6 Answers6

Update 2020 Swift 5, Xcode 11