Performance improvement

Development/AsyncMultiplexImage-Demo.xcodeproj/xcshareddata/xcschemes/AsyncMultiplexImage-Demo.xcscheme

@@ -53,7 +53,7 @@
          <EnvironmentVariable
             key = "ASYNC_MULTIPLEX_IMAGE_LOG_ENABLED"
             value = "1"
-            isEnabled = "YES">
+            isEnabled = "NO">
          </EnvironmentVariable>
       </EnvironmentVariables>
    </LaunchAction>

Development/AsyncMultiplexImage-Demo/ContentView.swift

@@ -45,67 +45,64 @@ actor _SlowDownloader: AsyncMultiplexImageDownloader {
 
 struct ContentView: View {
 
-  @State private var basePhotoURLString: String =
-    "https://images.unsplash.com/photo-1492446845049-9c50cc313f00"
-
   var body: some View {
     NavigationView {
       Form {
         Section {
           NavigationLink("SwiftUI") {
-            VStack {
-              AsyncMultiplexImage(
-                multiplexImage: .init(
-                  identifier: basePhotoURLString,
-                  urls: buildURLs(basePhotoURLString)
-                ),
-                downloader: _SlowDownloader(pipeline: .shared)
-              ) { phase in
-                switch phase {
-                case .empty:
-                  Text("Loading")
-                case .progress(let image):
-                  image
-                    .resizable()
-                    .scaledToFill()
-                case .success(let image):
-                  image
-                    .resizable()
-                    .scaledToFill()
-                case .failure(let error):
-                  Text("Error")
-                }
-              }
-
-              HStack {
-                Button("1") {
-                  basePhotoURLString =
-                    "https://images.unsplash.com/photo-1660668377331-da480e5339a0"
-                }
-                Button("2") {
-                  basePhotoURLString =
-                    "https://images.unsplash.com/photo-1658214764191-b002b517e9e5"
-                }
-                Button("3") {
-                  basePhotoURLString =
-                    "https://images.unsplash.com/photo-1587126396803-be14d33e49cf"
-                }
-              }
-            }
-            .padding()
-            .navigationTitle("SwiftUI")
+            SwitchingDemo()
+              .navigationTitle("SwiftUI")
           }
           NavigationLink("UIKit") {
             UIKitContentViewRepresentable()
           }
-          NavigationLink("SwiftUI List", destination: { UsingList() })
+
+          NavigationLink("Stress 1", destination: { StressGrid<Cell_1>() })
+
+          NavigationLink("Stress 2", destination: { StressGrid<Cell_2>() })
         }
         .navigationTitle("Multiplex Image")
       }
     }
   }
 }
 
+private struct SwitchingDemo: View {
+
+  @State private var basePhotoURLString: String =
+  "https://images.unsplash.com/photo-1492446845049-9c50cc313f00"
+
+  var body: some View {
+    VStack {
+      AsyncMultiplexImage(
+        multiplexImage: .init(
+          identifier: basePhotoURLString,
+          urls: buildURLs(basePhotoURLString)
+        ),
+        downloader: _SlowDownloader(pipeline: .shared),
+        content: AsyncMultiplexImageBasicContent()
+      )
+
+      HStack {
+        Button("1") {
+          basePhotoURLString =
+          "https://images.unsplash.com/photo-1660668377331-da480e5339a0"
+        }
+        Button("2") {
+          basePhotoURLString =
+          "https://images.unsplash.com/photo-1658214764191-b002b517e9e5"
+        }
+        Button("3") {
+          basePhotoURLString =
+          "https://images.unsplash.com/photo-1587126396803-be14d33e49cf"
+        }
+      }
+    }
+    .padding()
+  }
+
+}
+
 struct UIKitContentViewRepresentable: UIViewRepresentable {
 
   func makeUIView(context: Context) -> UIKitContentView {

Development/AsyncMultiplexImage-Demo/List.swift

@@ -1,67 +1,116 @@
 import AsyncMultiplexImage
 import AsyncMultiplexImage_Nuke
-//
-//  List.swift
-//  AsyncMultiplexImage-Demo
-//
-//  Created by Muukii on 2024/06/13.
-//
 import SwiftUI
 
-struct UsingList: View {
+struct StressGrid<Cell: CellType>: View {
 
   @State var items: [Entity] = Entity.batch()
 
   var body: some View {
-    ScrollView {
-      LazyVGrid(
-        columns: [
-          .init(.flexible(minimum: 0, maximum: .infinity), spacing: 16),
-          .init(.flexible(minimum: 0, maximum: .infinity), spacing: 16),
-          .init(.flexible(minimum: 0, maximum: .infinity), spacing: 16),
-          .init(.flexible(minimum: 0, maximum: .infinity), spacing: 16),
-        ], spacing: 16
-      ) {
-        ForEach(items) { entity in
-          if entity.id == items.last?.id {
-            Cell(entity: entity)
-              .onAppear {
-                Task {
-                  let newItems = await Entity.delayBatch()
-                  items.append(contentsOf: newItems)
-                }
-              }
-          } else {
-            Cell(entity: entity)
+    GeometryReader { proxy in
+      ScrollView {
+        LazyVGrid(
+          columns: [
+            .init(.flexible(minimum: 0, maximum: .infinity), spacing: 2),
+            .init(.flexible(minimum: 0, maximum: .infinity), spacing: 2),
+            .init(.flexible(minimum: 0, maximum: .infinity), spacing: 2),
+            .init(.flexible(minimum: 0, maximum: .infinity), spacing: 2),
+          ], spacing: 2
+        ) {
+          ForEach(items) { entity in
+            Cell(entity: entity)            
           }
         }
       }
+      .onPreferenceChange(AnchorPreferenceKey.self, perform: { v in
+        guard let v = v else {
+          return
+        }
+        let bounds = proxy[v]
+        print(bounds)
+      })
     }
   }
 
 }
 
 #Preview {
-  UsingList()
+  StressGrid<Cell_1>()
+}
+
+#Preview {
+  StressGrid<Cell_3>()
 }
 
 let imageURLString =
   "https://images.unsplash.com/photo-1567095761054-7a02e69e5c43?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 
-struct Cell: View {
+protocol CellType: View {
+  init(entity: Entity)
+}
+
+struct Cell_1: View, CellType {
+
+  let entity: Entity
+
+  var body: some View {
+    AsyncMultiplexImageNuke(imageRepresentation: .remote(entity.image))
+      .frame(height: 100)           
+  }
+}
+
+
+struct Cell_2: View, CellType {
 
   let entity: Entity
 
   var body: some View {
     VStack {
       AsyncMultiplexImageNuke(imageRepresentation: .remote(entity.image))
         .frame(height: 100)
-      HStack {
-        Image(systemName: "globe")
-          .imageScale(.large)
-          .foregroundStyle(.tint)
-        Text(entity.name)
-      }
+        .clipShape(
+          RoundedRectangle(
+            cornerRadius: 20,
+            style: .continuous
+          )
+        )
+        .frame(maxWidth: .infinity)
+        .aspectRatio(1, contentMode: .fit)      
+    }
+    .padding()
+  }
+}
+
+struct Cell_3: View, CellType {
+
+  final class Object: ObservableObject {
+
+    @Published var value: Int = 0
+
+    init() {
+      print("Object.init")    
+    }
+
+    deinit {
+//      print("Object.deinit")
+
+    }
+  }
+
+  let entity: Entity
+
+  @State private var value: Int = 0
+  @StateObject private var object = Object()
+
+  var body: some View {
+    let _ = Self._printChanges()
+    VStack {   
+      Button("Up \(value)") {
+        value += 1
+      }  
+      Button("Up \(object.value)") {
+        object.value += 1
+      }    
     }
     .padding()
   }
@@ -84,7 +133,7 @@ struct Entity: Identifiable {
   }
 
   static func batch() -> [Self] {
-    (0..<100).map { _ in
+    (0..<100000).map { _ in
       .make()
     }
   }

Sources/AsyncMultiplexImage-Nuke/AsyncMultiplexImageNuke.swift

@@ -12,27 +12,9 @@ public struct AsyncMultiplexImageNuke: View {
   public var body: some View {
     AsyncMultiplexImage(
       imageRepresentation: imageRepresentation,
-      downloader: AsyncMultiplexImageNukeDownloader.shared
-    ) { phase in
-      Group {
-        switch phase {
-        case .empty:
-          EmptyView()
-        case .progress(let image):
-          image
-            .resizable()
-            .scaledToFill()
-            .transition(.opacity.animation(.bouncy))
-        case .success(let image):
-          image
-            .resizable()
-            .scaledToFill()
-            .transition(.opacity.animation(.bouncy))          
-        case .failure:
-          EmptyView()
-        }
-      }
-    }
+      downloader: AsyncMultiplexImageNukeDownloader.shared,
+      content: AsyncMultiplexImageBasicContent()
+    )
   }
 
 }
@@ -52,11 +34,11 @@ public struct AsyncMultiplexImageNuke: View {
 
 #Preview("Rotating") {
   HStack {
-    
+
     Rectangle()
       .frame(width: 100, height: 100)
       .rotationEffect(.degrees(10))
-    
+
     AsyncMultiplexImageNuke(
       imageRepresentation: .remote(
         .init(
@@ -70,7 +52,7 @@ public struct AsyncMultiplexImageNuke: View {
     .frame(width: 100, height: 100)
     .rotationEffect(.degrees(10))
     .clipped(antialiased: true)
-    
+
     AsyncMultiplexImageNuke(
       imageRepresentation: .remote(
         .init(
@@ -83,7 +65,7 @@ public struct AsyncMultiplexImageNuke: View {
     )
     .frame(width: 100, height: 100)
     .rotationEffect(.degrees(20))
-    
+
     AsyncMultiplexImageNuke(
       imageRepresentation: .remote(
         .init(

Sources/AsyncMultiplexImage-Nuke/AsyncMultiplexImageNukeDownloader.swift

@@ -4,7 +4,7 @@ import Nuke
 import SwiftUI
 
 public actor AsyncMultiplexImageNukeDownloader: AsyncMultiplexImageDownloader {
-
+  
   public static let `shared` = AsyncMultiplexImageNukeDownloader(pipeline: .shared, debugDelay: 0)
 
   public let pipeline: ImagePipeline