[Blaze] Enhance loading UI for product image in Blaze Campaign Creation form (#15098)

Author: pmusolino

RELEASE-NOTES.txt

@@ -1,8 +1,9 @@
 *** PLEASE FOLLOW THIS FORMAT: [<priority indicator, more stars = higher priority>] <description> [<PR URL>]
 *** Use [*****] to indicate smoke tests of all critical flows should be run on the final IPA before release (e.g. major library or OS update).
+
 21.8
 -----
-
+- [*] Improved image loading in Blaze Campaign Creation: displays a redacted and shimmering effects when loading product image and falls back to a placeholder if no image is available. [https://github.com/woocommerce/woocommerce-ios/pull/15098]
 
 21.7
 -----

WooCommerce/Classes/ViewRelated/Blaze/CampaignCreation/BlazeCampaignCreationForm.swift

@@ -274,6 +274,8 @@ private extension BlazeCampaignCreationForm {
                     .resizable()
                     .aspectRatio(contentMode: .fit)
                     .cornerRadius(Layout.cornerRadius)
+                    .redacted(reason: viewModel.isLoadingProductImage ? .placeholder : [])
+                    .shimmering(active: viewModel.isLoadingProductImage)
 
                 // Tagline
                 Text(viewModel.isLoadingAISuggestions ? "Placeholder tagline" : viewModel.tagline)

WooCommerce/Classes/ViewRelated/Blaze/CampaignCreation/BlazeCampaignCreationFormViewModel.swift

@@ -214,7 +214,7 @@ final class BlazeCampaignCreationFormViewModel: ObservableObject {
     @Published private(set) var error: BlazeCampaignCreationError?
     private var suggestions: [BlazeAISuggestion] = []
 
-    @Published private var isLoadingProductImage: Bool = false
+    @Published private(set) var isLoadingProductImage: Bool = true
 
     var canEditAd: Bool {
         !isLoadingAISuggestions