Using the SwiftUI view modifer design pattern, to re-create indicator API. Now it will rerturn some View instead of WebImage

Author: dreampiggy

Example/SDWebImageSwiftUIDemo/ContentView.swift

@@ -96,8 +96,8 @@ struct ContentView: View {
                         } else {
                             #if os(macOS) || os(iOS) || os(tvOS)
                             WebImage(url: URL(string:url))
-                            .indicator(.activity)
                             .resizable()
+                            .indicator(.activity)
                             .scaledToFit()
                             .frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
                             .animation(.easeInOut(duration: 0.5))

Example/SDWebImageSwiftUIDemo/DetailView.swift

@@ -57,17 +57,17 @@ struct DetailView: View {
             } else {
                 #if os(macOS) || os(iOS) || os(tvOS)
                 WebImage(url: URL(string:url), options: [.progressiveLoad])
-                .indicator(.progress)
                 .resizable()
+                .indicator(.progress)
                 .scaledToFit()
                 #else
                 WebImage(url: URL(string:url), options: [.progressiveLoad])
+                .resizable()
                 .indicator { isAnimating, progress in
                     ProgressBar(value: progress)
                     .foregroundColor(.blue)
                     .frame(maxHeight: 6)
                 }
-                .resizable()
                 .scaledToFit()
                 #endif
             }

SDWebImageSwiftUI/Classes/Indicator/Indicator.swift

@@ -10,23 +10,52 @@ import Foundation
 import SwiftUI
 
 /// A  type to build the indicator
-public struct Indicator {
-    var builder: (Binding<Bool>, Binding<CGFloat>) -> AnyView
+public struct Indicator<T> where T : View {
+    var builder: (Binding<Bool>, Binding<CGFloat>) -> T
 
     /// Create a indicator with builder
     /// - Parameter builder: A builder to build indicator
     /// - Parameter isAnimating: A Binding to control the animation. If image is during loading, the value is true, else (like start loading) the value is false.
     /// - Parameter progress: A Binding to control the progress during loading. If no progress can be reported, the value is 0.
     /// Associate a indicator when loading image with url
-    public init<T>(@ViewBuilder builder: @escaping (_ isAnimating: Binding<Bool>, _ progress: Binding<CGFloat>) -> T) where T : View {
-        self.builder = { isAnimating, progress in
-            AnyView(builder(isAnimating, progress))
+    public init(@ViewBuilder builder: @escaping (_ isAnimating: Binding<Bool>, _ progress: Binding<CGFloat>) -> T) {
+        self.builder = builder
+    }
+}
+
+/// A implementation detail View with indicator
+/// SwiftUI View Modifier construced by using a internal View type which modify the `body`
+/// It use type system to represent the view hierarchy, and Swift `some View` syntax to hide the type detail for users
+struct IndicatorView<T, Content> : View where T : View, Content : View {
+    @ObservedObject var imageManager: ImageManager
+    
+    var indicator: Indicator<T>
+    var content: Content
+    
+    var body: some View {
+        if (imageManager.image != nil) && !imageManager.isLoading {
+            // Disable Indiactor
+            return AnyView(content)
+        } else {
+            // Enable indicator
+            return AnyView(
+                ZStack {
+                    content
+                    indicator.builder($imageManager.isLoading, $imageManager.progress)
+                }
+            )
         }
     }
+    
+    public init(_ view: Content, indicator: Indicator<T>, imageManager: ImageManager) {
+        self.content = view
+        self.indicator = indicator
+        self.imageManager = imageManager
+    }
 }
 
 #if os(macOS) || os(iOS) || os(tvOS)
-extension Indicator {
+extension Indicator where T == ActivityIndicator {
     /// Activity Indicator
     public static var activity: Indicator {
         Indicator { isAnimating, _ in
@@ -41,7 +70,9 @@ extension Indicator {
             ActivityIndicator(isAnimating, style: style)
         }
     }
-    
+}
+
+extension Indicator where T == ProgressIndicator {
     /// Progress Indicator
     public static var progress: Indicator {
         Indicator { isAnimating, progress in

SDWebImageSwiftUI/Classes/WebImage.swift

@@ -16,14 +16,8 @@ public struct WebImage : View {
     var context: [SDWebImageContextOption : Any]?
 
     var configurations: [(Image) -> Image] = []
-    var indicator: Indicator?
 
     @ObservedObject var imageManager: ImageManager
-    @State var progress: CGFloat = 0
-    @State var isLoading: Bool = false
-    var isFinished: Bool {
-        !isLoading && (imageManager.image != nil)
-    }
 
     /// Create a web image with url, placeholder, custom options and context.
     /// - Parameter url: The image url
@@ -52,7 +46,7 @@ public struct WebImage : View {
             // this can ensure we load the image, SDWebImage take care of the duplicated query
             self.imageManager.load()
         }
-        let view = configurations.reduce(image) { (previous, configuration) in
+        return configurations.reduce(image) { (previous, configuration) in
             configuration(previous)
         }
         .onAppear {
@@ -63,41 +57,6 @@ public struct WebImage : View {
         .onDisappear {
             self.imageManager.cancel()
         }
-        // Convert Combine.Publisher to Binding
-        .onReceive(imageManager.$isLoading) { isLoading in
-            // only Apple Watch complain that "Modifying state during view update, this will cause undefined behavior."
-            // Use dispatch to workaround, Thanks Apple :)
-            #if os(watchOS)
-            DispatchQueue.main.async {
-                self.isLoading = isLoading
-            }
-            #else
-            self.isLoading = isLoading
-            #endif
-        }
-        .onReceive(imageManager.$progress) { progress in
-            #if os(watchOS)
-            DispatchQueue.main.async {
-                self.progress = progress
-            }
-            #else
-            self.progress = progress
-            #endif
-        }
-        if let indicator = indicator {
-            if isFinished {
-                return AnyView(view)
-            } else {
-                return AnyView(
-                    ZStack {
-                        view
-                        indicator.builder($isLoading, $progress)
-                    }
-                )
-            }
-        } else {
-            return AnyView(view)
-        }
     }
 }
 
@@ -174,18 +133,14 @@ extension WebImage {
 
     /// Associate a indicator when loading image with url
     /// - Parameter indicator: The indicator type, see `Indicator`
-    public func indicator(_ indicator: Indicator?) -> WebImage {
-        var result = self
-        result.indicator = indicator
-        return result
+    public func indicator<T>(_ indicator: Indicator<T>) -> some View where T : View {
+        return IndicatorView(self, indicator: indicator, imageManager: imageManager)
     }
 
     /// Associate a indicator when loading image with url, convenient method with block
     /// - Parameter indicator: The indicator type, see `Indicator`
-    public func indicator<T>(@ViewBuilder builder: @escaping (_ isAnimating: Binding<Bool>, _ progress: Binding<CGFloat>) -> T) -> WebImage where T : View {
-        var result = self
-        result.indicator = Indicator(builder: builder)
-        return result
+    public func indicator<T>(@ViewBuilder builder: @escaping (_ isAnimating: Binding<Bool>, _ progress: Binding<CGFloat>) -> T) -> some View where T : View {
+        return indicator(Indicator(builder: builder))
     }
 }