Animate cell.imageview on async load - ios

Question

Im trying to do a table where the imageView on the cell changes alpha from 0 to 1 when the image is done loading (async).
What ever I do it seem that the image is just shown at one and not fading in. I'm sure it's some kind of race condition but I am new to animations in iOS and have no idea how to solve this. Any input would be great.
Here is my code:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
//Configure the cell...
let episode = episodes[indexPath.row]
cell.textLabel?.text = episode.title
cell.detailTextLabel?.text = episode.content
let logoUrl = URL(string: episode.logoUrl!)
if (episode.logoImage == nil){
episode.logoImage = UIImage()
DispatchQueue.global().async {
let data = try? Data(contentsOf: logoUrl!) //make sure your image in this url does exist, otherwise unwrap in a if let check / try-catch
DispatchQueue.main.async {
episode.logoImage = UIImage(data: data!)
cell.imageView?.image = episode.logoImage
self.episodesTable.reloadData()
cell.imageView?.alpha = 0
UIView.animate(withDuration: 1, animations: {
cell.imageView?.alpha = 1
})
}
}
} else{
cell.imageView?.image = episode.logoImage
}
return cell
}

Answer 1

You need to set alpha to 0 first before animating to 1.
cell.imageView?.alpha = 0
UIView.animate(withDuration: 1, animations: {
cell.imageView?.alpha = 1
})
Also, you dont need to reload table. Remove self.episodesTable.reloadData().
You are spanning a background thread and loading the image from url inside that thread. What if, in between user has scrolled the cell. You would be left with a wrong image on a wrong cell(because of cell reuse, that is).
My advice is to use SDWebImageCache, and use its completion block to animate the alpha.
// Changing animation duration to 0.2 seconds from 1 second
if(cacheType == SDImageCacheTypeNone) {
cell.imageView?.alpha = 0
[UIView animateWithDuration:0.2 animations:^{
cell.imageView?.alpha = 1;
}];
}

Answer 2

reloadData() call is causing reloading of all the cells including the one you are trying to animate. My advice is to mark your cell with it's index path. After async call check if it is still presenting the right data and animate it without reloading the whole table view.
// ...
cell.tag = indexPath.item
DispatchQueue.global().async {
// async load
DispatchQueue.main.async {
guard cell.tag == indexPath.item else { return }
cell.imageView?.alpha = 0.0
cell.imageView?.image = image
// animate
}
}
// ...