Fix the issue when image load success, some bad-written indicator will still exist. Now we remove all the view when finished. Fix the example

Author: dreampiggy

Example/SDWebImageSwiftUIDemo/DetailView.swift

@@ -12,17 +12,10 @@ import SDWebImageSwiftUI
 struct DetailView: View {
     let url: String
     let animated: Bool
-    @State var progress: CGFloat = 1
     @State var isAnimating: Bool = true
 
     var body: some View {
         VStack {
-            HStack {
-                ProgressBar(value: $progress)
-                .foregroundColor(.blue)
-                .frame(maxHeight: 6)
-            }
-            Spacer()
             #if os(iOS) || os(tvOS)
             if animated {
                 contentView()
@@ -45,24 +38,22 @@ struct DetailView: View {
                 contentView()
             }
             #endif
-            Spacer()
         }
     }
 
     func contentView() -> some View {
         HStack {
             if animated {
+                #if os(macOS) || os(iOS) || os(tvOS)
                 AnimatedImage(url: URL(string:url), options: [.progressiveLoad], isAnimating: $isAnimating)
-                .onProgress { receivedSize, expectedSize in
-                    // SwiftUI engine itself ensure the main queue dispatch
-                    if (expectedSize > 0) {
-                        self.progress = CGFloat(receivedSize) / CGFloat(expectedSize)
-                    } else {
-                        self.progress = 1
-                    }
-                }
+                .indicator(SDWebImageProgressIndicator.default)
                 .resizable()
                 .scaledToFit()
+                #else
+                AnimatedImage(url: URL(string:url), options: [.progressiveLoad], isAnimating: $isAnimating)
+                .resizable()
+                .scaledToFit()
+                #endif
             } else {
                 #if os(macOS) || os(iOS) || os(tvOS)
                 WebImage(url: URL(string:url), options: [.progressiveLoad])
@@ -73,13 +64,10 @@ struct DetailView: View {
                 .scaledToFit()
                 #else
                 WebImage(url: URL(string:url), options: [.progressiveLoad])
-                .onProgress { receivedSize, expectedSize in
-                    // SwiftUI engine itself ensure the main queue dispatch
-                    if (expectedSize > 0) {
-                        self.progress = CGFloat(receivedSize) / CGFloat(expectedSize)
-                    } else {
-                        self.progress = 1
-                    }
+                .indicator { isAnimating, progress in
+                    ProgressBar(value: progress)
+                    .foregroundColor(.blue)
+                    .frame(maxHeight: 6)
                 }
                 .resizable()
                 .scaledToFit()

Example/SDWebImageSwiftUIDemo/ProgressBar.swift

@@ -14,15 +14,15 @@ public struct ProgressBar: View {
 
     public var body: some View {
         GeometryReader { geometry in
-            ZStack(alignment: .topLeading) {
-                Capsule()
-                    .frame(width: geometry.size.width)
+            ZStack(alignment: .leading) {
+                Rectangle()
+                     .frame(width: geometry.size.width)
                     .opacity(0.3)
                 Rectangle()
                     .frame(width: geometry.size.width * self.value)
+                    .opacity(0.6)
             }
         }
-        .clipShape(Capsule())
-        .opacity(self.value < 1 ? 1 : 0)
+        .cornerRadius(2)
     }
 }

SDWebImageSwiftUI/Classes/WebImage.swift

@@ -21,6 +21,9 @@ public struct WebImage : View {
     @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
@@ -82,12 +85,16 @@ public struct WebImage : View {
             #endif
         }
         if let indicator = indicator {
-            return AnyView(
-                ZStack {
-                    view
-                    indicator.builder($isLoading, $progress)
-                }
-            )
+            if isFinished {
+                return AnyView(view)
+            } else {
+                return AnyView(
+                    ZStack {
+                        view
+                        indicator.builder($isLoading, $progress)
+                    }
+                )
+            }
         } else {
             return AnyView(view)
         }
@@ -166,7 +173,7 @@ extension WebImage {
 
     /// Associate a indicator when loading image with url
     /// - Parameter builder: builder description
-    /// - Parameter isAnimating: A Binding to control the animation. If image is loading, the value is true, else false.
+    /// - 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.
     public func indicator<T>(_ builder: @escaping (_ isAnimating: Binding<Bool>, _ progress: Binding<CGFloat>) -> T) -> WebImage where T : View {
         var result = self