Add a loading indicator to POSPageHeaderView

Author: staskus

WooCommerce/Classes/POS/Presentation/Reusable Views/POSPageHeaderView.swift

@@ -24,12 +24,14 @@ struct POSPageHeaderItem: Identifiable {
     let title: String
     let subtitle: String?
     let isSelected: Bool
+    let isLoading: Bool
     let action: (() -> Void)?
 
-    init(title: String, subtitle: String? = nil, isSelected: Bool, action: (() -> Void)? = nil) {
+    init(title: String, subtitle: String? = nil, isSelected: Bool, isLoading: Bool = false, action: (() -> Void)? = nil) {
         self.title = title
         self.subtitle = subtitle
         self.isSelected = isSelected
+        self.isLoading = isLoading
         self.action = action
     }
 }
@@ -52,10 +54,11 @@ struct POSPageHeaderView<TrailingContent: View>: View {
     init(
         title: String,
         subtitle: String? = nil,
+        isLoading: Bool = false,
         backButtonConfiguration: POSPageHeaderBackButtonConfiguration? = nil,
         @ViewBuilder trailingContent: () -> TrailingContent = { EmptyView() }
     ) {
-        self.items = [.init(title: title, subtitle: subtitle, isSelected: true)]
+        self.items = [.init(title: title, subtitle: subtitle, isSelected: true, isLoading: isLoading)]
         self.backButtonConfiguration = backButtonConfiguration
         self.trailingContent = trailingContent()
     }
@@ -79,20 +82,29 @@ struct POSPageHeaderView<TrailingContent: View>: View {
             HStack(alignment: hStackAlignment, spacing: POSSpacing.large) {
                 ForEach(0..<items.count, id: \.self) { index in
                     VStack(alignment: .leading, spacing: Constants.titleSubtitleSpacing) {
-                        Button(action: {
-                            items[index].action?()
-                        }) {
-                            Text(items[index].title)
-                                .font(.posHeadingBold)
-                                .lineLimit(1)
-                                .minimumScaleFactor(0.5)
-                                .dynamicTypeSize(...POSHeaderLayoutConstants.maximumDynamicTypeSize)
-                                .foregroundColor(items[index].isSelected ? .posOnSurface : .posOnSurfaceVariantLowest)
+                        HStack(spacing: POSSpacing.small) {
+                            Button(action: {
+                                items[index].action?()
+                            }) {
+                                Text(items[index].title)
+                                    .font(.posHeadingBold)
+                                    .lineLimit(1)
+                                    .minimumScaleFactor(0.5)
+                                    .dynamicTypeSize(...POSHeaderLayoutConstants.maximumDynamicTypeSize)
+                                    .foregroundColor(items[index].isSelected ? .posOnSurface : .posOnSurfaceVariantLowest)
+                            }
+                            .disabled(items[index].isSelected)
+                            .accessibilityElement()
+                            .accessibilityAddTraits(items.count == 1 ? .isHeader : [.isHeader, .isButton])
+                            .accessibilityLabel(items[index].title)
+
+                            if items[index].isLoading {
+                                ProgressView()
+                                    .progressViewStyle(.circular)
+                                    .scaleEffect(0.7)
+                                    .transition(.opacity.combined(with: .scale))
+                            }
                         }
-                        .disabled(items[index].isSelected)
-                        .accessibilityElement()
-                        .accessibilityAddTraits(items.count == 1 ? .isHeader : [.isHeader, .isButton])
-                        .accessibilityLabel(items[index].title)
 
                         if let subtitle = items[index].subtitle {
                             Text(subtitle)
@@ -193,6 +205,13 @@ private enum Constants {
             backButtonConfiguration: .init(state: .enabled, action: {})
         )
 
+        // Header with loading indicator.
+        POSPageHeaderView(
+            title: "Orders",
+            isLoading: true,
+            backButtonConfiguration: .init(state: .enabled, action: {})
+        )
+
         // Header with subtitle and disabled back button.
         POSPageHeaderView(
             title: "Cash payment",