How to synchronize a parse-read image with screen display in iOS - ios

Question

In TableViewController I display a table of records read from a parse database. Each cell displays a thumbnail, a title and a note. When a row is selected, the row index is saved and a segue is initiated to a detailView Controller which displays the image saved in a global UIImage variable (noteImage). In prepareForSegue I invoke loadImageFromParse in background which reads the image associated with the thumbnail and saves it into noteImage.
My problem is that there is a slight delay for the image to be read from parse so the detailViewController displays a blank. When I back up from the detailViewController to the TableViewController and reselect the row the picture is displayed.
I need a way to hold the segue invocation till the image has been read from Parse.
Any help would be appreciated.
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
selectedRow = indexPath.row
self.performSegueWithIdentifier("NoteSegue", sender: self)
tableView.deselectRowAtIndexPath(indexPath, animated: true)
}
// MARK: - Navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "NoteSegue"{
let vc = segue.destinationViewController as NoteViewController
vc.selectedRow = selectedRow
self.loadImageFromParse(objectIds[selectedRow])
}
}
// Load one image from parse
func loadImageFromParse (objectId: String) {
var query = PFQuery(className:"Record")
query.whereKey("objectId", equalTo:objectId)
query.findObjectsInBackgroundWithBlock {
(objects: [AnyObject]!, error: NSError!) -> Void in
if error == nil {
println("Successfully retrieved \(objects.count) records.")
for object in objects {
let userImageFile = object["image"] as PFFile!
userImageFile.getDataInBackgroundWithBlock {
(imageData: NSData!, error: NSError!) -> Void in
if error == nil {
noteImage = UIImage(data:imageData)!
println("Image successfully retrieved")
}
}
}
} else {
NSLog("Error: %# %#", error, error.userInfo!)
}
}
}

Answer 1

You said:
I need a way to hold the segue invocation till the image has been read from Parse.
That is, as I think you now guessed, not really the best way to do it. It's much better to initiate the transition to the next scene, and if the image is not available, present a UIActivityIndicatorView (a spinner), retrieve the image, and when it's done, remove the spinner and show the image. But delaying for a fixed amount of time is not going to work well: Sometimes you'll make the user wait longer than needed; sometimes you won't have waited long enough. (And, of course, doing the request synchronously is invariably not the right approach.)
The implementation of this is probably simplified if you put this image retrieval code inside the destination view controller. To have one view controller initiate an asynchronous process and have another be notified of the completion is awkward (though can be done through judicious use of notifications). But in this example (where you don't know which image to retrieve until you select a row), I see little benefit.
Having said all of that, the code is initiating two asynchronous requests, one for Record and one for the image itself. I wonder if you could capture this Record information when you populate this initiate table view. That way you only have to retrieve the image. Now perhaps Parse does some caching and the retrieval of the Record is incredibly fast anyway (so benchmark it before you refactor the code), but if not, you might want to capture the PFFile objects when you populate the original table view, saving you from having to do two queries.

Answer 2

I resolved the problem by introducing a 1 second delay after I start the background method loadImageFromParse and before I initiate a segue in performSegueWithDelay. This gives a slight pause after I select the row and before the image is visible in the target segue but it ensures that the image is available. Obviously there is a risk that this will not always work depending on size of the file I am getting from Parse.com and also the network load. I am considering putting an alert to the user if the image has not loaded.
Here is the code:
func performSegueWithDelay(timer: NSTimer) {
// action function for timer in didSelectRowAtIndexPath
self.performSegueWithIdentifier("NoteSegue", sender: self)
}
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
selectedRow = indexPath.row
self.loadImageFromParse(objectIds[selectedRow])
let myTimer : NSTimer = NSTimer.scheduledTimerWithTimeInterval(1, target: self,
selector: Selector("performSegueWithDelay:"), userInfo: nil, repeats: false)
tableView.deselectRowAtIndexPath(indexPath, animated: true)
}
// MARK: - Navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "NoteSegue"{
let vc = segue.destinationViewController as NoteViewController
}
}
// Load one image from parse
func loadImageFromParse (objectId: String) {
var query = PFQuery(className:"Record")
query.whereKey("objectId", equalTo:objectId)
query.findObjectsInBackgroundWithBlock {
(objects: [AnyObject]!, error: NSError!) -> Void in
if error == nil {
println("Successfully retrieved \(objects.count) records.")
for object in objects {
let userImageFile = object["image"] as PFFile!
userImageFile.getDataInBackgroundWithBlock {
(imageData: NSData!, error: NSError!) -> Void in
if error == nil {
noteImage = UIImage(data:imageData)!
println("Image successfully retrieved")
}
}
}
} else {
NSLog("Error: %# %#", error, error.userInfo!)
}
}
}