Inline images mail slow to display

Mail/Views/Thread/MessageView.swift

@@ -25,6 +25,40 @@ import RealmSwift
 import Shimmer
 import SwiftUI
 
+// TODO: move to Core
+extension Sequence {
+    func asyncMap<T>(
+        _ transform: (Element) async throws -> T
+    ) async rethrows -> [T] {
+        var values = [T]()
+
+        for element in self {
+            try await values.append(transform(element))
+        }
+
+        return values
+    }
+}
+
+// TODO: move to core
+extension Sequence {
+    func asyncForEach(
+        _ operation: (Element) async throws -> Void
+    ) async rethrows {
+        for element in self {
+            try await operation(element)
+        }
+    }
+}
+
+// TODO: move to core
+extension Collection {
+    /// Returns the element at the specified index if it is within bounds, otherwise nil.
+    subscript (safe index: Index) -> Element? {
+        return indices.contains(index) ? self[index] : nil
+    }
+}
+
 struct MessageView: View {
     @ObservedRealmObject var message: Message
     @State var presentableBody: PresentableBody
@@ -100,22 +134,52 @@ struct MessageView: View {
     }
 
     private func insertInlineAttachments() async throws {
-        let attachmentsArray = message.attachments.filter { $0.disposition == .inline }.toArray()
-        for attachment in attachmentsArray {
-            if let contentId = attachment.contentId {
-                let attachmentData = try await mailboxManager.attachmentData(attachment: attachment)
-
-                presentableBody.body?.value = presentableBody.body?.value?.replacingOccurrences(
-                    of: "cid:\(contentId)",
-                    with: "data:\(attachment.mimeType);base64,\(attachmentData.base64EncodedString())"
-                )
-                presentableBody.compactBody = presentableBody.compactBody?.replacingOccurrences(
-                    of: "cid:\(contentId)",
-                    with: "data:\(attachment.mimeType);base64,\(attachmentData.base64EncodedString())"
-                )
+        Task {
+            // Since mutation of the DOM is costly, I batch the processing of images, then mutate the DOM.
+            let attachmentsArray = message.attachments.filter { $0.disposition == .inline }.toArray()
+            let chunks = attachmentsArray.chunked(into: 10)
+
+            for chunk in chunks {
+                // Download images for the current chunk
+                let dataArray = try await chunk.asyncMap {
+                    try await mailboxManager.attachmentData(attachment: $0)
+                }
+
+                // Read the DOM once
+                var body = presentableBody.body?.value
+                var compactBody = presentableBody.compactBody
+
+                // Prepare the new DOM with the loaded images
+                for (index, attachment) in chunk.enumerated() {
+                    guard let contentId = attachment.contentId,
+                            let data = dataArray[safe: index] else {
+                        continue
+                    }
+
+                    body = body?.replacingOccurrences(
+                        of: "cid:\(contentId)",
+                        with: "data:\(attachment.mimeType);base64,\(data.base64EncodedString())"
+                    )
+                    compactBody = compactBody?.replacingOccurrences(
+                        of: "cid:\(contentId)",
+                        with: "data:\(attachment.mimeType);base64,\(data.base64EncodedString())"
+                    )
+                }
+
+                // Mutate DOM
+                self.insertInlineAttachment(body: body, compactBody: compactBody)
+
+                // Delay between each chunk processing just enough, so the user feels the UI is responsive.
+                try await Task.sleep(nanoseconds: 4_000_000_000)
             }
         }
     }
+
+    /// Update the DOM in the main thread
+    @MainActor func insertInlineAttachment(body: String?, compactBody: String?) {
+        presentableBody.body?.value = body
+        presentableBody.compactBody = compactBody
+    }
 }
 
 struct MessageView_Previews: PreviewProvider {