UIRefreshControl endRefreshing is not smooth

Question

When my data has finished loading and my tableView has been reloaded, I call endRefreshing on my refresh control, it then 'jumps' from its loading state and disappears - how can I implement a smooth animation that slides the refresh control away when it is complete?

Answer 1

I'm adding a new answer since the only one is not very precise in explanation. And this would probably be too much for comments.

The solution by Halpo is correct. But the reason mentioned is wrong.

Calling -[NSObject (NSDelayedPerforming) performSelector:withObject:afterDelay:] guarantees the call to be performed in the next runloop iteration.

So this does not work, because there is a small delay, but you're moving it to the next loop.

Actually you sh/could decrease the delay to 0.0 and it would still work. Also, a more correct (in terms of using the object meant to achieve something, not better in outcome) implementation is possible.

Here are the various code snippets for that:

// SOLUTION I

[[self tableView] reloadData];
[[self refreshControl] performSelector:@selector(endRefreshing) withObject:nil afterDelay:0.0];

// SOLUTION II (semantically correct)

[[self tableView] reloadData];
[[NSOperationQueue currentQueue] addOperationWithBlock:^{
    [[self refreshControl] endRefreshing];
}];

// SOLUTION III (GCD)

dispatch_async(dispatch_get_main_queue(), ^{
    [[self refreshControl] endRefreshing];
}];

EDIT

As johann-fradj pointed out, you could also use GCD. I do like GCD a lot, but I think, solution II is most descriptive about whats going on. Also, GCD is not very Objective-C-ish, so I'd personally rather stick to my solution.

Answer 2

Fixed the problem - I added a tiny delay to endRefresh after reloading data:

[self.tableView reloadData];
[self.refreshControl performSelector:@selector(endRefreshing) withObject:nil afterDelay:0.05];

Answer 3

Swift 4 solution

    tableView.reloadData()
    if refreshControl?.isRefreshing == true {
        DispatchQueue.main.async {
            self.refreshControl?.endRefreshing()
        }
    }

Other solutions (delay, using CATransaction, ...) are more complex and don't give any visible advantage

Answer 4

Try wrapping the call to endRefreshing() in a UIView animation block:

I've run into this issue as well. For endRefreshing() The documentation states:

UIView.animateWithDuration(0.5) {
    self.refreshControl.endRefreshing()
}

The documentation states:

If animations are also enabled, the control is hidden using an animation.

Answer 5

One of the reasons can be that you refresh your table view after the endRefresh is called. For example, my calls used to look like this:

[self.refreshControl beginRefreshing];
[self.network getThings:^(id things, NSError *error) {
    [self.refreshControl endRefreshing];

    if (error) {
        ...
    } else {
        self.things = things;
        [self.tableView reloadData];
    }
}];

Which is bad, because the table updates itself while the endRefresh animation runs. So the code done right looks like this:

[self.refreshControl beginRefreshing];
[self.network getThings:^(id things, NSError *error) {
    if (error) {
        [self.refreshControl endRefreshing];
        ...
    } else {
        self.things = things;
        [self.tableView reloadData];
        [self.refreshControl endRefreshing];
    }
}];

Answer 6

The solution for me was to run refreshControl?.endRefreshing() before the call to tableView.reloadData():

refreshControl?.endRefreshing()
tableView.reloadData()

When the call to endRefreshing() was after the call to reloadData(), the TableView would jump whenever the data was reloaded.

Answer 7

I found that calling endRefreshing() around the same time the tableView finishes its reload causes the bouncing/flashing glitch. I tried the other options mentioned in other answers with OperationQueue and performSelector but it did not provide me the control or smoothness I was seeing in other apps. Instead I opted for this solution updated for Swift and my specific scenario:

UIView.animate(withDuration: self.refreshControl.isRefreshing ? 0.5 : 0) {
    self.refreshControl.endRefreshing()
} completion: { finished in
    self.tableView.reloadData()
}

With this we can make sure that we end the refreshing from the refreshControl before the tableView reloading ever happens. That way we can ensure the separation of the two actions with no conflict in animation.