Prefetching and image preparation and TCA

[mycroftcanner]

After watching WWDC I tried to implement some of the new APIs to prepare images for display.

Some items in my store have thumbnail information and the view for those items needs a UIImage ... However coordinating this inside a reducer that runs on the main queue is quite inefficient:

If the thumbnail has been cached it is loaded from there:

      if let data = URLCache.shared.cachedResponse(for: request)?.data {
        try Task.checkCancellation()
        return await UIImage(data: data)?.byPreparingForDisplay()
      }

otherwise we load it, prepare a thumbnail of the right size, starts a utility task to compress it and cache it :

      try Task.checkCancellation()
      
      let image = await UIImage(data: data)?.byPreparingThumbnail(ofSize: size)
      try Task.checkCancellation()

      Task(priority: .utility) {
        if let data = image?.jpegData(compressionQuality: 0.75) {
          logger.debug("prepareThumbnail(for: \(cnIdentifier, privacy: .private)): \(data.count, privacy: .public)")
          try Task.checkCancellation()
          
          if let response = HTTPURLResponse(
            url: url,
            statusCode: 200,
            httpVersion: kCFHTTPVersion1_1 as String,
            headerFields: ["Content-Type": "image/jpeg"]
          ) {
            URLCache.shared.storeCachedResponse(.init(response: response, data: data), for: request)
          }
        }
      }

Right now I am doing all this work from the a task :

public struct Visual: View {
  let store: Store<ItemState, ItemAction>
  @ObservedObject var viewStore: ViewStore<ViewState, ItemAction>
  @State private var image: UIImage?
  @State private var detachedTask: Task<UIImage?, Never>?

[...]

      VisualView(image: image, scale: scale, seed: viewStore.seed, size: proxy.size)
        .task {
          image = await prepareThumbnail(for: visual, modifiedAt: modifiedAt, ofSize: size)
        }
        .onChange(of: viewStore.state) { state in
          Task {
            image = await prepareThumbnail(for: state.visual, modifiedAt: state.modifiedAt, ofSize: size)
          }
        }
        .onDisappear {
          detachedTask?.cancel()
          detachedTask = nil
          image = nil
        }

  @MainActor
  private func prepareThumbnail(for visual: ViewState.Visual?, modifiedAt: Date?, ofSize size: CGSize) async -> UIImage? {
    guard let visual = visual else { return nil }
    
    detachedTask?.cancel()
    detachedTask = Task.detached(priority: .high) {
      let size = size.applying(.init(scaleX: scale, y: scale))
      
      switch visual {
      case let .cnIdentifier(cnIdentifier):
        return await prepareThumbnail(for: cnIdentifier, modifiedAt: modifiedAt, ofSize: size)
        
      case let .named(named):
        return UIImage(named: named)
      }
    }
    return await 

n.b. VisualView is a UIViewRepresentable

All of the work is done in the background using a task ... I could do that work in the background via the store's environment but then I will have to keep the UIImage inside store's state and it will cause many unnecessary updates and thread hopping.

UIImages that are prepared this way take a lot of memory and need to be cleared when the view disappear, causing again unnecessary updates to the store.

Anyone else has encountered similar issues with ephemeral data?