Supports the delayPlaceholder for WebImage, update the Example to show the usage

Author: dreampiggy

Example/SDWebImageSwiftUIDemo-macOS/Assets.xcassets/wifi.exclamationmark.imageset/Contents.json

@@ -0,0 +1,24 @@
+{
+  "images" : [
+    {
+      "filename" : "wifi.exclamationmark.svg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

Example/SDWebImageSwiftUIDemo-macOS/Assets.xcassets/wifi.exclamationmark.imageset/wifi.exclamationmark.svg

@@ -22,7 +22,7 @@ class UserSettings: ObservableObject {
 // watchOS does not provide built-in indicator, use Espera's custom indicator
 extension Indicator where T == LoadingFlowerView {
     /// Activity Indicator
-    public static var activity: Indicator {
+    static var activity: Indicator {
         Indicator { isAnimating, _ in
             LoadingFlowerView()
         }
@@ -31,7 +31,7 @@ extension Indicator where T == LoadingFlowerView {
 
 extension Indicator where T == StretchProgressView {
     /// Progress Indicator
-    public static var progress: Indicator {
+    static var progress: Indicator {
         Indicator { isAnimating, progress in
             StretchProgressView(progress: progress)
         }

Example/SDWebImageSwiftUIDemo/ContentView.swift

@@ -9,6 +9,31 @@
 import SwiftUI
 import SDWebImageSwiftUI
 
+// Placeholder when image load failed (with `.delayPlaceholder`)
+#if !os(watchOS)
+extension PlatformImage {
+    static var wifiExclamationmark: PlatformImage {
+        #if os(macOS)
+        return PlatformImage(named: "wifi.exclamationmark")!
+        #else
+        return PlatformImage(systemName: "wifi.exclamationmark")!.withTintColor(.label, renderingMode: .alwaysOriginal)
+        #endif
+    }
+}
+#endif
+
+extension Image {
+    static var wifiExclamationmark: Image {
+        #if os(macOS)
+        return Image("wifi.exclamationmark")
+        .resizable()
+        #else
+        return Image(systemName: "wifi.exclamationmark")
+        .resizable()
+        #endif
+    }
+}
+
 struct DetailView: View {
     let url: String
     let animated: Bool
@@ -86,19 +111,22 @@ struct DetailView: View {
         HStack {
             if animated {
                 #if os(macOS) || os(iOS) || os(tvOS)
-                AnimatedImage(url: URL(string:url), options: [.progressiveLoad], isAnimating: $isAnimating)
-                .indicator(SDWebImageProgressIndicator.default)
+                AnimatedImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
                 .resizable()
+                .placeholder(.wifiExclamationmark)
+                .indicator(SDWebImageProgressIndicator.default)
                 .scaledToFit()
                 #else
-                WebImage(url: URL(string:url), options: [.progressiveLoad], isAnimating: $isAnimating)
+                WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder], isAnimating: $isAnimating)
                 .resizable()
+                .placeholder(.wifiExclamationmark)
                 .indicator(.progress)
                 .scaledToFit()
                 #endif
             } else {
-                WebImage(url: URL(string:url), options: [.progressiveLoad])
+                WebImage(url: URL(string:url), options: [.progressiveLoad, .delayPlaceholder])
                 .resizable()
+                .placeholder(.wifiExclamationmark)
                 .indicator(.progress)
                 .scaledToFit()
             }

Example/SDWebImageSwiftUIDemo/DetailView.swift

@@ -106,17 +106,7 @@ public struct WebImage : View {
                     }
                 }
             } else {
-                Group {
-                    if placeholder != nil {
-                        placeholder
-                    } else {
-                        // Should not use `EmptyView`, which does not respect to the container's frame modifier
-                        // Using a empty image instead for better compatible
-                        configurations.reduce(Image.empty) { (previous, configuration) in
-                            configuration(previous)
-                        }
-                    }
-                }
+                setupPlaceholder()
                 .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                 .onAppear {
                     guard self.retryOnAppear else { return }
@@ -136,6 +126,29 @@ public struct WebImage : View {
         }
     }
 
+    func configure(image: Image) -> some View {
+        // Should not use `EmptyView`, which does not respect to the container's frame modifier
+        // Using a empty image instead for better compatible
+        configurations.reduce(image) { (previous, configuration) in
+            configuration(previous)
+        }
+    }
+    
+    /// Placeholder View Support
+    func setupPlaceholder() -> some View {
+        // Don't use `Group` because it will trigger `.onAppear` and `.onDisappear` when condition view removed, treat placeholder as an entire component
+        if placeholder != nil {
+            // If use `.delayPlaceholder`, the placeholder is applied after loading failed, hide during loading :)
+            if imageManager.options.contains(.delayPlaceholder) && imageManager.isLoading {
+                return AnyView(configure(image: Image.empty))
+            } else {
+                return AnyView(placeholder)
+            }
+        } else {
+            return AnyView(configure(image: Image.empty))
+        }
+    }
+    
     /// Animated Image Support
     func setupPlayer(image: PlatformImage?) {
         if imagePlayer != nil {