tableView reloadData in loop not drawing cells on each pass - ios

Question

I have a tableView.reloadData() call in a loop in several places in my app. the basic idea is like this:
let dataSourceArray = []
for arrayItem in anotherArray {
dataSourceArray.append(arrayItem)
self.tableView.reloadData()
}
What I'm trying to achieve is to have the tableView draw each cell as it is loaded into the model array.
What is currently happening is that all the cells appear once the loop is complete.
This is all being done in the main thread, however I tried anyway to dispatch to main thread for the reloadData call. That made no difference. I tried tableView.layoutIfNeeded() after reloadData and that also made no difference.
Placing break points in the cellForRowAtIndexPath and heightForRow... methods indicate normal tableView calls as expected at each pass in the loop. However for some reason the cells don't draw on screen until the loop is completed.
Is there anyway to force the tableView to draw the cell at each pass other than what I have tried above?

Answer 1

I belive the reason is because the looping of your elements will be done very quickly (milliseconds) therefore you will not notice the incremental changes.

Answer 2

You need to run outer loop in global queue like below and dispatch reloadData to main queue.
var dataSourceArray = [ String ]()
#IBAction func
DoA( _: Any? ) {
let anotherArray = [ "A", "B", "C" ]
DispatchQueue.global().async {
for arrayItem in anotherArray {
self.dataSourceArray.append( arrayItem )
DispatchQueue.main.async {
self.tableView.reloadData()
}
Thread.sleep( forTimeInterval: 1 )
}
}
}

Answer 3

If you want a neat animation thats visible then you can probably force a timer on it, between each append; with a UIView.animate or UIView.transition... I'd prefer the transition method, it gives you a few options that make your changes even neater.
Here is a sample of what you can do (dont copy paste it directly, adjust it to your own, i wrote it in playground without testing it)
var i = 0
func addItem(){
if i == anotherArray.count {
return
}
UIView.transition(with: tableView, duration: 0.3, options: [.allowAnimatedContent, .transitionCrossDissolve], animations: { // content that is going to animate
dataSourceArray.append(anotherArray[i])
tableView.reloadData()
}) { // completion block
i += 1
addItem()
}
}
Other than that, you can change the content mode of your tableView (most probably from the storyboard) to be set to .top so on every change your tableView keeps on sticking to the top rather than jumping around (https://developer.apple.com/documentation/uikit/uiview/1622619-contentmode). This specially helps if you're using autolayouts