Images showing with activityIndicator as images is being refreshed - ios

Question

I am working on VirtualTourist project on Udacity and we are required to display images as the images are being refreshed through a Flickr Client. Currently my implementation is such that the refresh will only show once the images are fully downloaded. The project requires such that the images are shown as an when they are downloaded, and while the downloading is happening, an activity indicator is displayed instead.
My code as follows:
#IBAction func newCollectionButtonDidTap(_ sender: Any) {
print("FETCHING NEW COLLECTION...")
DispatchQueue.main.async {
self.photos.removeAll()
self.collectionView.reloadData()
print("Reload Data newColVC")
}
for items in fetchedResultsController.fetchedObjects! {
context.delete(items as! NSManagedObject)
}
loadPhotos()
}
func loadPhotos() {
newColActivityIndicator.startAnimating()
newColActivityIndicator.isHidden = false
newCollectionButton.isUserInteractionEnabled = false
newCollectionButton.alpha = 0.4
FlickrClient.sharedInstance.getPhotos(pin.coordinate.latitude as AnyObject, lon: pin.coordinate.longitude as AnyObject, { (results, error) in
if let error = error {
print(error)
} else {
if results != nil {
for result in results! {
let picture = Photo(pin: self.pin, imageData: result as NSData, context: self.context)
self.photos.append(picture)
}
do {
try self.delegate.stack?.saveContext()
} catch let error as NSError {
print("Error saving context in loadPhotos(): \(error.localizedDescription)")
}
DispatchQueue.main.async {
self.collectionView.reloadData()
self.newColActivityIndicator.stopAnimating()
self.newColActivityIndicator.isHidden = true
self.newCollectionButton.isUserInteractionEnabled = true
self.newCollectionButton.alpha = 1.0
print("Reload Data loadPhotos")
}
}
}
})
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ImageViewCell
cell.activityIndicator.startAnimating()
cell.activityIndicator.isHidden = false
let photo = photos[indexPath.row]
if let photoImage = photo.imageData {
print("PhotoImage present")
DispatchQueue.main.async {
cell.activityIndicator.stopAnimating()
cell.activityIndicator.isHidden = true
cell.imageView?.image = UIImage(data: photoImage as Data)
}
} else {
print("PhotosImage don have")
}
return cell
}
Some advice here is much appreciated, thanks!

Answer 1

So firstly when you tap newCollectionButton you are removing all the data stored in core data as well as removing all those which are being displayed in collection view. So at this moment, collection view doesnot have anything to display. as a result it should be empty showing nothing.
Now, i think your loadPhotos methods returns the collection of photos from flicker which you add it to your local array and coredata. datasource of collection view must be using data from photos array.
You remove the activity indicator and then reload the collection view. At this point, you already have the necessary data for the images to be shown available. So cellForItemAt retrives data from local array, and create image and displays it. Maybe this process is happenning so fast, that your cell.activityIndicator.startAnimating() & cell.activityIndicator.stopAnimating() is executing much faster.
Since your question is unclear, & your loadPhotos fetches collection of photos data, if you want that activityIndicator to be shown in each cell, until all the image gets downloaded, you can
Remove just imagedata present in Photo object stored in local/coredata
make cell to show activity indicator if there is no image data present in each cell
reloadData() so that activity indicator starts
call loadPhotos
After downloading all photos, clear photo array, store downloaded Photos in array and call reloadData() so that all the images gets displayed.