How to hide tableview until images are completely loaded iOS Swift?

Question

My images take a second to load before they appear, which looks bad. On apps such as instagram, the tableview is hidden until the tableview is loaded... how do they do this? I have a loader that I want to display but don't know when to stop it and show tableview and detect the images have first finished loading? Where do I put stopTimer()?

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MainTableViewCell",
                                                 for: indexPath) as! MainTableViewCell
    let payment = self.payments[indexPath.row]
    cell.profilePicture.layer.cornerRadius = cell.profilePicture.frame.size.width / 2
    cell.profilePicture.clipsToBounds = true

                if let profileImageUrl = payment.picture {
                    cell.profilePicture.loadImageUsingCacheWithUrlString(profileImageUrl)
                    }
                
    if payment.message == "none" {
        cell.detailsLabel.text = "No Message"
    } else {
        cell.detailsLabel.text = "\"\(payment.message ?? "")\""
    }
}

MY CODE TO FETCH IMAGE IN TABLEVIEW:

let imageCache = NSCache<NSString, AnyObject>()

extension UIImageView {

func loadImageUsingCacheWithUrlString(_ urlString: String) {
    self.image = nil
    
    //check cache for image first
    if let cachedImage = imageCache.object(forKey: urlString as NSString) as? UIImage {
        self.image = cachedImage
        return
    }
    
    //otherwise fire off a new download
    guard let url = URL(string: urlString) else { return }
    URLSession.shared.dataTask(with: url, completionHandler: { (data, response, error) in
        
        //download hit an error so lets return out
        if let error = error {
            print(error)
            return
        }
        
        DispatchQueue.main.async(execute: {
            
            if let downloadedImage = UIImage(data: data!) {
                imageCache.setObject(downloadedImage, forKey: urlString as NSString)
                
                self.image = downloadedImage
            }
        })
        
    }).resume()
}
}

Answer 1

You can simple use SDWebImage with cocoaPods and use it for async image downloader with cache support. Your cell will look like after ad SDWebImage.

import SDWebImage


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MainTableViewCell",
                                             for: indexPath) as! MainTableViewCell
    let payment = self.payments[indexPath.row]
    cell.profilePicture.layer.cornerRadius = cell.profilePicture.frame.size.width / 2
    cell.profilePicture.clipsToBounds = true

    if let profileImageUrl = payment.picture {
        cell.profilePicture.sd_setImage(with: profileImageUrl, placeholderImage: UIImage(named: "yourPlaceholderImage.png"))
    }
            
    if payment.message == "none" {
    cell.detailsLabel.text = "No Message"
    } else {
    cell.detailsLabel.text = "\"\(payment.message ?? "")\""
    }
}

There is no need to hide tableView for downloading image.