PFQuery in TableCell Cause Images to Jump - ios

Question

So I have researched and haven't found anything similar to my situation. All relevant code will be posted below. I am using parse for my backend and am trying to create a feed with people posted images. The images and username load fine, but since the display name and profile picture are in a separate file i had to query them separately. The query for those is located in the table cell itself. This causes images to jump while scrolling. I am aware that is because of the way cells dequeue. Is there a better way to either query or relate the data from both parse queries?
var usernameArray = [String]()
var detailArray = [String]()
var uuidArray = [String]()
var postArray = [PFFile]()
var followArray = [String]()
var page: Int = 10
var image: UIImage!
var follow = PFObject(className: "Follow")
func loadFollowers(){
let followerQuery = PFQuery(className: "Follow")
followerQuery.whereKey("follower", equalTo: (PFUser.current()?.username!)! as String)
followerQuery.whereKey("blocker", notEqualTo: (PFUser.current()?.username!)! as String)
followerQuery.findObjectsInBackground { (objects: [PFObject]?, error: Error?) in
if error == nil{
self.followArray.removeAll(keepingCapacity: false)
for object in objects!{
self.followArray.append(object.object(forKey: "following") as! String)
self.followArray.insert((PFUser.current()?.username!)! as String, at: 0)
}
let dataQuery = PFQuery(className: "Posts")
dataQuery.whereKey("user", containedIn: self.followArray)
dataQuery.limit = self.page
dataQuery.addDescendingOrder("_created_at")
dataQuery.findObjectsInBackground(block: { (objects: [PFObject]?, error: Error?) in
if error == nil{
self.usernameArray.removeAll(keepingCapacity: false)
self.detailArray.removeAll(keepingCapacity: false)
self.postArray.removeAll(keepingCapacity: false)
self.uuidArray.removeAll(keepingCapacity: false)
for object in objects!{
self.usernameArray.append(object.object(forKey: "user") as! String)
self.detailArray.append(object.object(forKey: "title") as! String)
self.postArray.append(object.object(forKey: "picture") as! PFFile)
self.uuidArray.append(object.object(forKey: "uuid") as! String)
self.tableView.reloadData()
}
}
})
}
}
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "postView") as! FeedTableViewCell
cell.userName.text = usernameArray[indexPath.row]
cell.details.text = detailArray[indexPath.row]
cell.uuid.text = uuidArray[indexPath.row]
let query = PFUser.query()
query?.whereKey("username", equalTo:cell.userName.text!)
query?.findObjectsInBackground(){(objects: [PFObject]?, error: Error?) -> Void in
if !(error != nil){
for object in (objects as [PFObject]?)!{
cell.displayName.text = object.object(forKey: "display") as? String
if let userPicture = object.object(forKey: "avi") as? PFFile {
userPicture.getDataInBackground(block: { (imageData: Data?, error: Error?) in
if (error == nil) {
let image = UIImage(data:imageData!)
cell.avi.image = image
}
})
}
}
}
}
aviArray[indexPath.row].getDataInBackground { (data: Data?, error: Error?) in
if error == nil{
cell.avi.image = UIImage(data: data!)
}
}
postArray[indexPath.row].getDataInBackground { (data: Data?, error: Error?) in
if error == nil{
cell.post.image = UIImage(data: data!)
}
}
return cell
}
Thank you in advance for the help. I am open to all suggestions because I am at a loss for this. Im not an expert so there is probably a much better way to do this.

Answer 1

Get the actual URL of the image, and set the images with SDWebImage.
No need to reinvent the wheel anymore. It will solve this problem and reduce the complexity of your code.

Answer 2

Listen up, my dude, you should create a pointer in the Follow table that stores the _User objects. Running a PFQuery like that in "cellForRowAt indexPath" is bad news. You should do everything in your power to structure the backend data on Parse to inter-relate in such a way where you can pull all data like that in the original query. However, it is safe to run small queries in the "cellForRowAt indexPath" using things like "strings" pulled from the server, images not so much, but, it's okay to load images in the background inside "cellForRowAt indexPath", but running full queries on images like that is not a good idea. My suggestion is use PFImageView and connect your Follow table to the _User table on the backend, this is possible, and it's the right way to do things. Also, you should consider inserting all images into an array when they are pulled in, what you're doing there is running a query on every cell every damn time the table view is updated, this is horrible.