Swift 5 remote image loads in UITableViewCell on click not on load

Question

I have a tableview cell that does not load properly. when it loads it is supposed to load the title and the image at the same time, like any normal page. as of now it only loads the images when you click on the cell. and when you click the image it is larger than it's supposed to be. not sure why. it's similar code used in another part of the project and I don't have that issue there. so there it is. not sure if what's going on is related to all those constraints I haven't set yet.

the project is an Amazon clone. the data is called from an api and the images are given as url strings. so I'm loading images from urls and placing them into my image views.

here's a video of what is going on. in the video I wait a few seconds before clicking on the cell to give it a chance to load on its own. in the code where the image is processed from the url there is a print statement that fires around the same time the title is generated so I know the image is created. it's just waiting until it is clicked to appear. not sure why. https://gfycat.com/talkativebackhornet

the page where the code is loaded. this code performs a search and uses the results to form the ProductsDetails struct where the data is displayed. this is basically just the Amazon page you get when you select a product. the image view will later be converted into a horizontal scrolling view once the code is working.

class ProductViewController: UITableViewController {

var asinForSearch: String = ""
var resultsManager = ResultsManager()
var productsDetails = Array()
{
    didSet {
        DispatchQueue.main.async {
            self.tableView.reloadData()
        }
    }
}

override func viewDidLoad() {
    super.viewDidLoad()
    
    resultsManager.detailsDelegate = self
    tableView.dataSource = self
    tableView.register(UINib(nibName: "ImagesCell", bundle: nil), forCellReuseIdentifier: "imagesCell")
    
    tableView.rowHeight = 750
    populateDetailsPage()
    
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return productsDetails.count
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let productResults = productsDetails[indexPath.row]
    let cell = tableView.dequeueReusableCell(withIdentifier: "imagesCell", for: indexPath) as! ImagesCell
    let url = URL(string: productResults.mainImage)
    cell.imagioView.kf.setImage(with: url)
    cell.title.text = productResults.title
    
    return cell
}

func populateDetailsPage(){
    resultsManager.getDetails(asinForSearch)
    DispatchQueue.main.async {
        self.tableView.reloadData()
    }
}

}

extension ProductViewController: ResultsDetailDelegate {
func updateDetails(_ resultsManager: ResultsManager, products: Products){
    self.productsDetails.append(products)
}
}

here's the code that creates the cell. not sure if this is necessary.

class ImagesCell: UITableViewCell, UIScrollViewDelegate {


@IBOutlet weak var imageScrollView: UIScrollView!
@IBOutlet weak var title: UILabel!
@IBOutlet weak var imagioView: UIImageView!
@IBOutlet weak var view: UIView!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
    
    imageScrollView.delegate = self
    imageScrollView.contentSize = CGSize(width: imagioView.frame.width, height: imagioView.frame.height)
    self.imageScrollView.addSubview(imagioView)
    
    view.addSubview(imageScrollView)
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}
}

func getDetails(_ asin: String){
    let search = "\(detailRequest)\(asin)&country=US"
    var request = URLRequest(url: URL(string: search)!)
    
    request.httpMethod = "GET"
    request.allHTTPHeaderFields = params
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")

    let session = URLSession.shared
    
    let task = session.dataTask(with: request) { data, response, error -> Void in
    if let jsonData = data {
        do {
            let root = try JSONDecoder().decode(ProductDetail.self, from: jsonData)
            if let productDetails =  self.parseJSONDetails(root.product) {
                self.detailsDelegate?.updateDetails(self, products: productDetails)
            }
        } catch {
            print(error)
        }
    }
    }
    task.resume()
}

func parseJSONDetails(_ safeData: Products) -> Products? {
    do {
        let products = Products(asin: safeData.asin, deliveryMessage: safeData.deliveryMessage, productDescription: safeData.productDescription, featureBullets: safeData.featureBullets, images: safeData.images, mainImage: safeData.mainImage, price: safeData.price, productInformation: safeData.productInformation, title: safeData.title, totalImages: safeData.totalImages, totalVideos: safeData.totalVideos, url: safeData.url)
        return products
    } catch {
        print()
    }
}

let me know if there's any other code you need to see

Swift 5 remote image loads in UITableViewCell on click not on load

Answers (1)

Related Questions