UITableView Flickering with UIRefreshControl - ios

Question

I have aUITableView withUIRefreshControl defined inside the viewDidLoad: method of aUIViewController as below:
- (void)viewDidLoad {
[super viewDidLoad];
self.refreshControl = [[UIRefreshControl alloc] init];
[self.refreshControl addTarget:self action:#selector(refreshMessages) forControlEvents:UIControlEventValueChanged];
UITableViewController *tableViewController = [[UITableViewController alloc] init];
tableViewController.tableView = self.messagesTableView;
tableViewController.refreshControl = self.refreshControl;
}
- (void)refreshMessages {
//load data items
if ([self.refreshControl isRefreshing]) {
[self.refreshControl endRefreshing];
}
[self.messagesTableView reloadData];
}
I use self sizing cell to update the cell data. On re-loading the data theUITableView flickers. Is there a way to avoid this?
Edit
I have linked the video file for a sample demo. The UITableView on reload data, flickers. I use autolayout to update the dynamic cell heights.
Here is a sample code that can recreate this issue. The UITableView should be pulled to refresh. The table view is reloaded on the main queue. The cell are being resized with autolayout.

Answer 1

I got the same issue today and I managed to solve the problem using CATransaction, here is a code snippet in Swift, executed within a UITableViewController :
CATransaction.begin()
CATransaction.setCompletionBlock { () -> Void in
/*wait for endRefreshing animation to complete
before reloadData so table view does not flicker to top
then continue endRefreshing animation */
self.tableView.reloadData()
}
self.refreshControl!.endRefreshing()
CATransaction.commit()

Answer 2

The problem is that you are calling -reloadData and -endRefreshing together. Both want to update the view. You need to separate them a bit.
One of these options will work, depending on where you want to see the cells update:
[self.tableView reloadData];
[self.refreshControl performSelector:#selector(endRefreshing) withObject:nil afterDelay:0.5];
[self.refreshControl endRefreshing];
[self.tableView performSelector:#selector(reloadData) withObject:nil afterDelay:0.5];
Probably you need less delay with the first option. Even 0.0 seconds seemed to work in your example code. That's enough to get the -endRefreshing animation on the next screen refresh.

Answer 3

Swift
You may want to use
extendedLayoutIncludesOpaqueBars = true
in your ViewController in order to have correct UIRefreshControl animation.

Answer 4

I guess the issue is using estimatedHeight & UITableViewAutomaticDimension along with uitableview's reloadData. This has been reported here
The delay would work but its still not the right way to achieve it unless you want a hackish work around.

Answer 5

May be calling reloadData and endRefreshing could have caused the flicker to take place so what i did was modified your code a bit and removed the dispatch block which cleared off the flick
- (void)refreshMessages{
self.messages = [NSMutableArray new];
[self loadData];
[self.tableView reloadData];
[self.refreshControl performSelector:#selector(endRefreshing) withObject:nil afterDelay:0.5];
// double delayInSeconds = 0.5;
// dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t) (delayInSeconds * NSEC_PER_SEC));
// dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
// [self.refreshControl endRefreshing];
// });
}

Answer 6

Have you tried?
[self.messagesTableView beginUpdates];
[self.messagesTableView reloadSections:[NSIndexSet indexSetWithIndex:0/*target section*/] withRowAnimation:UITableViewRowAnimationNone];
[self.messagesTableView endUpdates];
instead of:
[self.messagesTableView reloadData];

Answer 7

-(void)refreshMessages{
self.messages = [NSMutableArray new];
[self loadData];
[self.tableView reloadData];
[self.refreshControl endRefreshing];
}