Recommendations for showing asynchronously-fetched images

Cell configurations are flexible, and can be used in a number of different ways. They can be applied from outside the cell (e.g. directly from the code where you dequeue and return the cell to the table or collection view), which is great for simple cells where you don't need a custom cell subclass.

But you can also apply configurations to the cell from inside your own cell subclass. As a best practice, you should choose a single place to update and apply your configurations to the cell, and just re-run that code anytime you need to, instead of having multiple places in your code all trying to set or update the cell's configurations. In your cell subclass, the best place to do this is in an override of updateConfiguration(using state:), and you can request an update anytime you want by calling setNeedsUpdateConfiguration().

With that in mind, here's how you can use configurations with asynchronous content. First of all, you can keep the same image-loading code that you are familiar with. When the image loads, we'll set it to a loadedImage property on the cell. Anytime this property is set, we'll just ask for a configuration update for the cell. And finally, we override updateConfiguration(using state:) to set up the content configuration and apply it to the cell, based on the loaded image.

Code Block swift
var loadedImage: UIImage? {
		didSet {
				setNeedsUpdateConfiguration()
		}
}
override func updateConfiguration(using state: UICellConfigurationState) {
    var content = self.defaultContentConfiguration().updated(for: state)
		// You could also set a placeholder image here if desired, when loadedImage is nil
    content.image = self.loadedImage
		// You'll likely want to set a reserved layout size for the image, so it doesn't change the layout when it loads
		content.imageProperties.reservedLayoutSize = ...
    self.contentConfiguration = content
}

The first time the cell displays, loadedImage will likely be nil, but as soon as it loads, it triggers a configuration update where a new configuration is applied to the cell with that image.

If there are other asynchronous properties, or any other inputs that affect the cell's configuration, you can follow the exact same pattern.