refactor: extract logic for getting an avatar image into a separate manager that is shared between uikit and swiftui implementations

Author: mikhailChelbaev

Sources/ComponentsKit/Components/Avatar/Helpers/AvatarImageManager.swift

@@ -0,0 +1,57 @@
+import SwiftUI
+import UIKit
+
+final class AvatarImageManager: ObservableObject {
+  @Published var avatarImage: UIImage
+
+  private var model: AvatarVM
+  private var remoteImagesCache = NSCache<NSString, UIImage>()
+
+  init(model: AvatarVM) {
+    self.model = model
+
+    let size = model.preferredSize
+    switch model.imageSrc {
+    case .remote(let url):
+      self.avatarImage = model.placeholderImage(for: size)
+      self.downloadImage(url: url)
+    case let .local(name, bundle):
+      self.avatarImage = UIImage(named: name, in: bundle, compatibleWith: nil) ?? model.placeholderImage(for: size)
+    case .none:
+      self.avatarImage = model.placeholderImage(for: size)
+    }
+  }
+
+  func update(model: AvatarVM, size: CGSize) {
+    self.model = model
+
+    switch model.imageSrc {
+    case .remote(let url):
+      if let image = self.remoteImagesCache.object(forKey: url.absoluteString as NSString) {
+        self.avatarImage = image
+      } else {
+        self.avatarImage = model.placeholderImage(for: size)
+        self.downloadImage(url: url)
+      }
+    case let .local(name, bundle):
+      self.avatarImage = UIImage(named: name, in: bundle, compatibleWith: nil) ?? model.placeholderImage(for: size)
+    case .none:
+      self.avatarImage = model.placeholderImage(for: size)
+    }
+  }
+
+  private func downloadImage(url: URL) {
+    Task { @MainActor in
+      let request = URLRequest(url: url)
+      guard let (data, _) = try? await URLSession.shared.data(for: request),
+            let image = UIImage(data: data)
+      else { return }
+
+      self.remoteImagesCache.setObject(image, forKey: url.absoluteString as NSString)
+
+      if url == self.model.imageURL {
+        self.avatarImage = image
+      }
+    }
+  }
+}

Sources/ComponentsKit/Components/Avatar/Helpers/ImageLoader.swift

@@ -7,7 +7,7 @@ public struct SUAvatar: View {
   /// A model that defines the appearance properties.
   public var model: AvatarVM
 
-  @State private var loadedImage: (url: URL, image: UIImage)?
+  @StateObject private var imageManager: AvatarImageManager
 
   // MARK: - Initialization
 
@@ -16,73 +16,26 @@ public struct SUAvatar: View {
   ///   - model: A model that defines the appearance properties.
   public init(model: AvatarVM) {
     self.model = model
+    self._imageManager = StateObject(
+      wrappedValue: AvatarImageManager(model: model)
+    )
   }
 
   // MARK: - Body
 
   public var body: some View {
-    Group {
-      if let source = self.model.imageSrc {
-        switch source {
-        case .remote:
-          if let loadedImage {
-            Image(uiImage: loadedImage.image)
-              .resizable()
-              .transition(.opacity)
-          } else {
-            self.placeholder
-          }
-        case let .local(name, bundle):
-          Image(name, bundle: bundle)
-            .resizable()
-        }
-      } else {
-        self.placeholder
-      }
-    }
-    .aspectRatio(contentMode: .fill)
-    .frame(
-      width: self.model.preferredSize.width,
-      height: self.model.preferredSize.height
-    )
-    .clipShape(
-      RoundedRectangle(cornerRadius: self.model.cornerRadius.value())
-    )
-    .onAppear {
-      if let imageURL = self.model.imageURL {
-        self.downloadImage(url: imageURL)
-      }
-    }
-    .onChange(of: self.model.imageSrc) { newValue in
-      switch newValue {
-      case .remote(let url):
-        self.downloadImage(url: url)
-      case .local, .none:
-        break
-      }
-    }
-  }
-
-  // MARK: - Subviews
-
-  private var placeholder: some View {
-    Image(uiImage: self.model.placeholderImage(
-      for: self.model.preferredSize
-    ))
+    Image(uiImage: self.imageManager.avatarImage)
       .resizable()
-  }
-
-  // MARK: - Helpers
-
-  private func downloadImage(url: URL) {
-    guard self.loadedImage?.url != url else { return }
-
-    self.loadedImage = nil
-    Task { @MainActor in
-      guard let image = await ImageLoader.download(url: url) else { return }
-      withAnimation {
-        self.loadedImage = (url, image)
+      .aspectRatio(contentMode: .fill)
+      .frame(
+        width: self.model.preferredSize.width,
+        height: self.model.preferredSize.height
+      )
+      .clipShape(
+        RoundedRectangle(cornerRadius: self.model.cornerRadius.value())
+      )
+      .onChange(of: self.model) { newValue in
+        self.imageManager.update(model: newValue, size: newValue.preferredSize)
       }
-    }
   }
 }

Sources/ComponentsKit/Components/Avatar/SUAvatar.swift

@@ -1,3 +1,4 @@
+import Combine
 import UIKit
 
 /// A UIKit component that displays a profile picture, initials or fallback icon for a user.
@@ -11,7 +12,8 @@ open class UKAvatar: UIImageView, UKComponent {
     }
   }
 
-  private var loadedImage: (url: URL, image: UIImage)?
+  private let imageManager: AvatarImageManager
+  private var cancellable: AnyCancellable?
 
   // MARK: - UIView Properties
 
@@ -26,16 +28,26 @@ open class UKAvatar: UIImageView, UKComponent {
   ///   - model: A model that defines the appearance properties.
   public init(model: AvatarVM = .init()) {
     self.model = model
+    self.imageManager = AvatarImageManager(model: model)
 
     super.init(frame: .zero)
 
+    self.setup()
     self.style()
   }
 
   public required init?(coder: NSCoder) {
     fatalError("init(coder:) has not been implemented")
   }
 
+  // MARK: - Setup
+
+  private func setup() {
+    self.cancellable = self.imageManager.$avatarImage
+      .receive(on: DispatchQueue.main)
+      .sink { self.image = $0 }
+  }
+
   // MARK: - Style
 
   private func style() {
@@ -48,9 +60,8 @@ open class UKAvatar: UIImageView, UKComponent {
   public func update(_ oldModel: AvatarVM) {
     guard self.model != oldModel else { return }
 
-    if self.model.shouldUpdateImage(oldModel) {
-      self.updateImage()
-    }
+    self.imageManager.update(model: self.model, size: self.bounds.size)
+
     if self.model.cornerRadius != oldModel.cornerRadius {
       self.layer.cornerRadius = self.model.cornerRadius.value(for: self.bounds.height)
     }
@@ -67,7 +78,7 @@ open class UKAvatar: UIImageView, UKComponent {
 
     self.layer.cornerRadius = self.model.cornerRadius.value(for: self.bounds.height)
 
-    self.updateImage()
+    self.imageManager.update(model: self.model, size: self.bounds.size)
   }
 
   // MARK: - UIView Methods
@@ -78,42 +89,4 @@ open class UKAvatar: UIImageView, UKComponent {
     let side = min(minProvidedSide, minPreferredSide)
     return CGSize(width: side, height: side)
   }
-
-  // MARK: - Helpers
-
-  private func downloadImage(url: URL) {
-    self.loadedImage = nil
-    Task { @MainActor in
-      guard let image = await ImageLoader.download(url: url),
-            url == self.model.imageURL
-      else { return }
-
-      self.loadedImage = (url, image)
-      UIView.transition(
-        with: self,
-        duration: 0.2,
-        options: .transitionCrossDissolve,
-        animations: {
-          self.image = image
-        }
-      )
-    }
-  }
-
-  private func updateImage() {
-    let size = self.bounds.size
-    switch self.model.imageSrc {
-    case .remote(let url):
-      if let loadedImage, loadedImage.url == url {
-        self.image = loadedImage.image
-      } else {
-        self.image = self.model.placeholderImage(for: size)
-        self.downloadImage(url: url)
-      }
-    case let .local(name, bundle):
-      self.image = UIImage(named: name, in: bundle, compatibleWith: nil) ?? self.model.placeholderImage(for: size)
-    case .none:
-      self.image = self.model.placeholderImage(for: size)
-    }
-  }
 }