Weird Inconsistent tableview Swift 4 - swift

Question

I'm downloading images stored in firebase and put them in an array.
But when I'm retrieving them and display in tableview, the images seems to be out of order and weirdly inconsistent every time. Anyone know how the code can be fixed?
override func viewDidLoad() {
super.viewDidLoad()
ref = Database.database().reference()
retrieveData()
retrieveImage()
}
func retrieveImage(){
let userID = Auth.auth().currentUser?.uid
ref.child("Images").observeSingleEvent(of: .value, with: { (snapshot) in
let userImage = snapshot.value as? NSDictionary
let imageURLArray = userImage?.allKeys
if userImage != nil{
for index in 0...userImage!.count-1{
let imageProfile = userImage![imageURLArray?[index]] as? NSDictionary
let imageURL = imageProfile!["url"]
let usernameDB = imageProfile!["username"]
let timeCreatedDB = imageProfile!["timeCreated"] as? Double
let date = NSDate(timeIntervalSince1970: timeCreatedDB!)
let dayTimePeriodFormatter = DateFormatter()
dayTimePeriodFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
let dateString = dayTimePeriodFormatter.string(from: date as Date)
let storageRef = Storage.storage().reference(forURL: imageURL as! String)
self.usernames.insert(usernameDB as! String, at: 0)
self.timesCreated.insert(dateString, at: 0)
storageRef.getData(maxSize: 1 * 1024 * 1024) { data, error in
if let error = error {
print(error.localizedDescription)
} else {
let image = UIImage(data: data!)
self.images.insert(image!, at: 0)
self.tableView.reloadData()
}
}
}
}
}) { (error) in
print(error.localizedDescription)
}
}

Answer 1

The problem is that the call to get the image inside the loop returns the image asynchronously and so while you may request all of the images in a specific order, they're not guaranteed to return in that order mostly because of varying file sizes (the smaller images will likely return sooner). You're also reloading the table after each image get, which isn't contributing to your problem, but a design I would recommend against; simply load the table once after all of the data is in hand.
To fix your problem, you should use a dispatch group to notify you when all of the images have been downloaded asynchronously; then you can sort the array and load the table. This is a common place to use dispatch groups--inside loops that contain async calls. Declare the dispatch group outside of the loop, enter the group before each async call, and leave that group after each async return. Then the dispatch group calls its completion block, where you sort the array and load the table.
func retrieveImage(){
let userID = Auth.auth().currentUser?.uid
ref.child("Images").observeSingleEvent(of: .value, with: { (snapshot) in
let userImage = snapshot.value as? NSDictionary
let imageURLArray = userImage?.allKeys
if userImage != nil{
let dispatchGroup = DispatchGroup() // create dispatch group outside of the loop
for index in 0...userImage!.count-1{
let imageProfile = userImage![imageURLArray?[index]] as? NSDictionary
let imageURL = imageProfile!["url"]
let usernameDB = imageProfile!["username"]
let timeCreatedDB = imageProfile!["timeCreated"] as? Double
let date = NSDate(timeIntervalSince1970: timeCreatedDB!)
let dayTimePeriodFormatter = DateFormatter()
dayTimePeriodFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
let dateString = dayTimePeriodFormatter.string(from: date as Date)
let storageRef = Storage.storage().reference(forURL: imageURL as! String)
self.usernames.insert(usernameDB as! String, at: 0)
self.timesCreated.insert(dateString, at: 0)
dispatchGroup.enter() // enter this group before async call
storageRef.getData(maxSize: 1 * 1024 * 1024) { data, error in
if let error = error {
print(error.localizedDescription)
} else {
let image = UIImage(data: data!)
self.images.insert(image!, at: 0)
//self.tableView.reloadData() don't reload here
}
dispatchGroup.leave() // leave this group after async return
}
}
// this is called after all of the async calls in the loop returned
// it puts you on the main thread
dispatchGroup.notify(queue: .main, execute: {
self.tableView.reloadData() // load table
})
}
}) { (error) in
print(error.localizedDescription)
}
}
The code above does not include the sorting mechanism because that's a bit more coding than I wanted to do but the execution is simple. To keep the images in the same order, you can do a number of things, one of which is to enumerate the loop, take the count of each loop iteration and attach it to the image, and then sort the array by that number before you load the table.
for (count, image) in images.enumerated() {
// take the count and attach it to each image
// the easiest way I think is to create a custom object
// that contains the image and the count
}
// and then in your dispatch group completion handler...
dispatchGroup.notify(queue: .main, execute: {
// sort the images by their enumerated count before loading the table
imagesArray.sort { $0.thatCount < $1.thatCount }
DispatchQueue.main.async {
self.tableView.reloadData() // load the table
}
})