Tableview scrolling is a bit fidgety. How can I make it buttery smooth

Question

Here is my code in cell for row method:-

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeue(.journalListingCell, for: indexPath) as! JournalListViewCell
    cell.delegate = self
    //fetching the category model as per the category id 
    if let category = categories?.first(where: { $0.categoryID == dreamJournalArray[indexPath.row].categoryID }) {

        cell.configureCell(dreamJournalArray[indexPath.row], category)
    }

    return cell
}

This code is just matching a category id from a array of categories to the category id in the main data model and passing along that category to the configure cell model along with the data model.

The configure cell method is as follows:-

 typealias Model = DreamJournalModel
 func configureCell(_ model: Model, _ category: CategoryModel) {

    //setting the gradient colors
    verticalView.backgroundColor = category.categoryGradientColor(style: .topToBottom, frame: verticalView.frame, colors: [UIColor.init(hexString: category.initialGradientColor)!,  UIColor.init(hexString: category.lastGradientColor)!])
    horizontalVIew.backgroundColor = category.categoryGradientColor(style: .leftToRight, frame: self.frame, colors: [ UIColor.init(hexString: category.lastGradientColor)!, UIColor.init(hexString: category.initialGradientColor)!])
    timelineCircleView.backgroundColor = category.categoryGradientColor(style: .topToBottom, frame: timelineCircleView.frame, colors: [UIColor.init(hexString: category.initialGradientColor)!,  UIColor.init(hexString: category.lastGradientColor)!])

    // setting the intention matching image as per the rating
   intentionImageView.image = UIImage.init(named: "Match\(model.intentionMatchRating)")

    // setting up the date of the journal recorded
   let date = Date(unixTimestamp: model.createdAt!)
    dateMonthLabel.text = (date.monthName(ofStyle: .threeLetters)).uppercased()
    dateNumberLabel.text = String(date.day)

    //setting the titles and labels
    dreamTitleLabel.text = model.title
    dreamTagsLabel.text = model.tags

    // setting the lucid icon
    gotLucidImageview.isHidden = !(model.isLucid!)

    //setting the buttons text or image
    if model.recordingPath != nil {
        addRecordButton.setTitle(nil, for: .normal)
        addRecordButton.backgroundColor = UIColor.clear
        addRecordButton.layer.cornerRadius = 0
        addRecordButton.setImage(LRAsset.cardRecording.image, for: .normal)

    }
    else{
        addRecordButton.setTitle(" + RECORD ", for: .normal)
        addRecordButton.backgroundColor = UIColor.blackColorWithOpacity()
        addRecordButton.layer.cornerRadius = addRecordButton.bounds.height/2
        addRecordButton.setImage(nil, for: .normal)

    }

    if model.note != nil {
        addNoteButton.setTitle(nil, for: .normal)
        addNoteButton.backgroundColor = UIColor.clear
        addNoteButton.layer.cornerRadius = 0
        addNoteButton.setImage(LRAsset.cardNote.image, for: .normal)

    }
    else{
        addNoteButton.setTitle(" + NOTE ", for: .normal)
        addNoteButton.backgroundColor = UIColor.blackColorWithOpacity()
        addNoteButton.layer.cornerRadius = addRecordButton.bounds.height/2
        addNoteButton.setImage(nil, for: .normal)

    }

    if model.sketchPath != nil {
        addSketchButton.setTitle(nil, for: .normal)
        addSketchButton.backgroundColor = UIColor.clear
        addSketchButton.layer.cornerRadius = 0
        addSketchButton.setImage(LRAsset.CardSketch.image, for: .normal)
    }
    else{
        addSketchButton.setTitle(" + SKETCH ", for: .normal)
        addSketchButton.backgroundColor = UIColor.blackColorWithOpacity()
        addSketchButton.layer.cornerRadius = addSketchButton.bounds.height/2
        addSketchButton.setImage(nil, for: .normal)

    }
}

In this method I am setting the gradient colors in the cell as per the category. And then I am setting the button states at the bottom according to the mentioned conditions.

Here's what my tableview looks like:-

The 3 buttons at the bottom of the cell are in a Stackview and their appearance is changing dynamically as per the conditions.

The tableview is not scrolling smooth and the lag is very visible to the naked eye. The height for the cell is fixed at 205.0 and is defined in the height for the row index method. I don't know where my fetching and feeding the data to the cell logic is mistaken. Please guide if the scrolling can be improved here. Thanks in advance.

Answer 1

You are writing too much code inside func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell which should not be there Examples can be setting corner radius, background colors, gradients. These are called each time. You can implement these when the cell is created inside awakeFromNib method.

But this is not that much of a reason your tableview is having scrolling issues. It is because of images that you are adding inside that method. You can use iOS 10 new tableView(_:prefetchRowsAt:) method which will be a better place to load images or preparing data for your cells before being displayed taking things like images there which is called prior to dequeue method.

Here is the link form Apple documentation:

https://developer.apple.com/documentation/uikit/uitableviewdatasourceprefetching/1771764-tableview

The table view calls this method as the user scrolls, providing the index paths for cells it is likely to display in the near future. Your implementation of this method is responsible for starting any expensive data loading processes. The data loading must be performed asynchronously, and the results made available to the tableView(_:cellForRowAt:) method on the table view's data source.The collection view does not call this method for cells it requires immediately, so your code must not rely on this method to load data. The order of the index paths provided represents the priority.

https://developer.apple.com/documentation/uikit/uitableviewdatasourceprefetching