TableView cells are getting empty data when scrolling quickly - ios

Question

So I'm running a function(item.getUserBySupporterID(supporter_id: supporter_id)) in each cell to make a request in my view model for each cell to get a String and an Image for each cell. If I scroll down fast on my table view, the data at the bottom is not loaded from the requests while some requests return nil. If I scroll slow, the data is loaded fine:
https://gph.is/g/apk3N5O
import Foundation
import UIKit
class NotificationVC: Toolbar, UITableViewDelegate, UITableViewDataSource {
private var myTableView:UITableView!
var notifications:[NotificationViewModel] = [] {
didSet {
myTableView.reloadData()
}
}
var profile = SessionManager.shared.profile
override func viewDidLoad() {
view.backgroundColor = UIColor.white
navigationController?.isToolbarHidden = false
addTableView()
loadNotifications()
}
func loadNotifications() {
print("loadNotifications")
if let user_id = profile?.sub {
let getNotifications = GETNotificationsByUserID(user_id: user_id)
getNotifications.getNotifications { notifications in
self.notifications = notifications.map { notification in
let ret = NotificationViewModel()
ret.mainNotification = notification
return ret
}
}
}
}
func addTableView() {
self.myTableView = UITableView()
self.myTableView?.translatesAutoresizingMaskIntoConstraints = false
self.myTableView.frame.size.height = self.view.frame.height
self.myTableView.frame.size.width = self.view.frame.width
self.myTableView.register(NotificationCell.self, forCellReuseIdentifier: "MyCell")
self.myTableView.dataSource = self
self.myTableView.delegate = self
self.myTableView.isScrollEnabled = true
myTableView.delaysContentTouches = false
self.view.addSubview(self.myTableView)
self.myTableView?.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
self.myTableView?.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
self.myTableView?.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
self.myTableView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
self.myTableView.estimatedRowHeight = 100
self.myTableView.rowHeight = UITableView.automaticDimension
myTableView.layoutMargins = UIEdgeInsets.zero
myTableView.separatorInset = UIEdgeInsets.zero
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return notifications.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath as IndexPath) as! NotificationCell
cell.selectionStyle = .none
cell.delegate = self
let item = self.notifications[indexPath.item]
cell.viewModel = item
return cell
}
}
import Foundation
import UIKit
class NotificationCell: UITableViewCell {
static var shared = NotificationCell()
var profile = SessionManager.shared.profile
var notificationType:String?
var messageTextViewBtm:NSLayoutConstraint?
var viewModel: NotificationViewModel? {
didSet {
if let item = viewModel {
if let notificationMessage = item.mainNotification?.message {
if notificationMessage.contains("replied to your comment") {
notificationType = "reply"
} else if notificationMessage.contains("liked your comment") {
notificationType = "likedComment"
} else if notificationMessage.contains("started following you") {
notificationType = "follow"
} else if notificationMessage.contains("liked your post") {
notificationType = "likedPost"
} else if notificationMessage.contains("commented on your post") {
notificationType = "commentedPost"
}
}
if let supporter_id = item.mainNotification?.supporter_id {
if item.gotSupporter == false {
item.getUserBySupporterID(supporter_id: supporter_id)
} else {
self.user_image.image = item.supporterImage
self.username.text = item.supporterName
}
item.supporterImageDidSet = { [weak self] in self?.user_image.image = $0 }
item.supporterNameDidSet = { [weak self] in self?.username.text = $0 }
}
}
}
}
var components:URLComponents = {
var component = URLComponents()
component.scheme = "http"
component.host = "localhost"
component.port = 8000
return component
}()
lazy var username:UILabel = {
let label = UILabel()
label.text = ""
label.font = label.font.withSize(19)
label.sizeToFit()
return label
}()
lazy var user_image: UIImageView = {
let image = UIImageView()
image.isUserInteractionEnabled = true
let gesture = UITapGestureRecognizer()
gesture.addTarget(self, action: #selector(userImageClicked))
image.addGestureRecognizer(gesture)
return image
}()
lazy var messageTextView:UITextView = {
let tv = UITextView()
tv.isScrollEnabled = false
tv.isEditable = false
tv.sizeToFit()
tv.backgroundColor = UIColor.lightGray
tv.textContainer.maximumNumberOfLines = 0
tv.textContainer.lineBreakMode = .byCharWrapping
tv.font = UIFont(name: "GillSans", size: 18)
return tv
}()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
addSubview(username)
addSubview(user_image)
addSubview(messageTextView)
user_imageContraints()
usernameContraints()
messageConstraints()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func user_imageContraints() {
user_image.translatesAutoresizingMaskIntoConstraints = false
user_image.topAnchor.constraint(equalTo:topAnchor, constant: 8).isActive = true
user_image.leadingAnchor.constraint(equalTo:leadingAnchor, constant: 8).isActive = true
user_image.heightAnchor.constraint(equalToConstant: 40).isActive = true
user_image.widthAnchor.constraint(equalToConstant: 40).isActive = true
}
func usernameContraints() {
username.translatesAutoresizingMaskIntoConstraints = false
username.topAnchor.constraint(equalTo: user_image.topAnchor).isActive = true
username.leadingAnchor.constraint(equalTo: user_image.trailingAnchor, constant: 3).isActive = true
username.heightAnchor.constraint(equalToConstant: 25).isActive = true
}
func messageConstraints() {
messageTextView.translatesAutoresizingMaskIntoConstraints = false
messageTextView.topAnchor.constraint(equalTo: username.bottomAnchor).isActive = true
messageTextViewBtm = messageTextView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20)
messageTextViewBtm?.isActive = true
messageTextView.leadingAnchor.constraint(equalTo: user_image.trailingAnchor, constant: 3).isActive = true
messageTextView.trailingAnchor.constraint(equalTo: post_image.leadingAnchor, constant: -5).isActive = true
}
}
import UIKit
import Foundation
class NotificationViewModel {
var mainNotification: Notifications?
var imageLoader: DownloadImage?
var supporterName: String? { didSet { supporterNameDidSet?(supporterName) } }
var supporterNameDidSet: ((String?)->())?
var supporterImage: UIImage? = UIImage() { didSet { supporterImageDidSet?(supporterImage) } }
var supporterImageDidSet: ((UIImage?)->())?
var gotSupporter:Bool = false
func getUserBySupporterID(supporter_id:String) {
GetUsersById(id: supporter_id).getAllPosts { user in
self.gotSupporter = true
self.imageLoader = DownloadImage()
self.imageLoader?.imageDidSet = { [weak self] image in
self?.supporterImage = image
self?.supporterImageDidSet?(image)
}
if let picture = user[0].picture {
self.imageLoader?.downloadImage(urlString: picture)
}
self.supporterName = user[0].username
self.supporterNameDidSet?(user[0].username)
}
}
}```

Answer 1

It is not a nice idea to fetch cell info from remote source one by one. It seems you need to find a way to get all supporter infos at once and put them in your notifications. After then dispylay your data with comleted data source.
Downloading image for each cell one by one can be ok with caching. Because images are too big things to download at once(and again and again). And this is not good for your customers especially if they are using cellular data with high pricing(Also most of cases users does not scrooll to bottom of your view so downloading an imagee to not even display is not a good idea). But it seems not same for your supporter info. They can be fetched at once. If there are too much notification data or fething too much supporter info at once makes your app slower, You can write a pagination mechanism.