MessageKit - How to async load images in subclass of MessagesViewController?

Question

Recently I have been developing a chat application and was having trouble asynchronously loading images with the chat.

Working with MessageKit - 2.0

I had tried this

import MessageKit

class Image: MediaItem {
  var url: URL?

  var image: UIImage?

  var placeholderImage: UIImage

  var size: CGSize

  init(url: URL) {
    self.url = url
    self.size = CGSize(width: 240, height: 240)
    self.placeholderImage = UIImage()
    DispatchQueue.global().async {
        if let data = try? Data(contentsOf: url) {
            if let image = UIImage(data: data) {
                DispatchQueue.main.async {
                    self.image = image
                }
            }
        }
    }
}

init(image: UIImage) {
    self.image = image
    self.size = CGSize(width: 240, height: 240)
    self.placeholderImage = UIImage()
}

}

Then I initialize the Image MessageType with kind = .photo(Image(url: url))

This doesn't seem to work.

Answer 1

I have since learnt that MessageKit provides a delegate method in MessagesDisplayDelegate called

func configureMediaMessageImageView(_ imageView: UIImageView,
                                    for message: MessageType,
                                    at indexPath: IndexPath,
                                    in messagesCollectionView: MessagesCollectionView)

We can asynchronously load images for given message with this delegate method.

I am using a UIImageView extension to help with this

import UIKit

extension UIImageView {
  func load(url: URL) {
    DispatchQueue.global().async { [weak self] in
        if let data = try? Data(contentsOf: url) {
            if let image = UIImage(data: data) {
                DispatchQueue.main.async {
                    self?.image = image
                }
            }
        }
     }
   }
 }

So the solution is as follows

func configureMediaMessageImageView(_ imageView: UIImageView,
                                    for message: MessageType,
                                    at indexPath: IndexPath,
                                    in messagesCollectionView: MessagesCollectionView) {
    /*acquire url for the image in my case i had a 
    custom type Message which stored  the image url */
    guard
        let msg = message as? Message,
        let url = msg.downloadURL
    else { return }
    imageView.load(url: url)
}