Merge pull request #6176 from woocommerce/fix/infinite-scroll-migration-to-lazyvstack

Migrated `InfiniteScrollList` from `List` to `LazyVStack`

Author: pmusolino

WooCommerce/Classes/ViewRelated/Inbox/Inbox.swift

@@ -18,14 +18,9 @@ struct Inbox: View {
                 InfiniteScrollList(isLoading: viewModel.shouldShowBottomActivityIndicator,
                                    loadAction: viewModel.onLoadNextPageAction) {
                     ForEach(viewModel.noteRowViewModels) { rowViewModel in
-                        if #available(iOS 15.0, *) {
-                            // In order to show full-width separator, the default list separator is hidden and a `Divider` is shown inside the row.
-                            InboxNoteRow(viewModel: rowViewModel)
-                                .listRowSeparator(.hidden)
-                        } else {
-                            InboxNoteRow(viewModel: rowViewModel)
-                        }
+                        InboxNoteRow(viewModel: rowViewModel)
                     }
+                    .background(Constants.listForeground)
                 }
             case .empty:
                 // TODO: 5954 - update empty state
@@ -34,17 +29,19 @@ struct Inbox: View {
                            image: .emptyProductsTabImage)
                     .frame(maxHeight: .infinity)
             case .syncingFirstPage:
-                List {
-                    ForEach(viewModel.placeholderRowViewModels) { rowViewModel in
-                        InboxNoteRow(viewModel: rowViewModel)
-                            .redacted(reason: .placeholder)
-                            .shimmering()
+                ScrollView {
+                    LazyVStack(spacing: 0) {
+                        ForEach(viewModel.placeholderRowViewModels) { rowViewModel in
+                            InboxNoteRow(viewModel: rowViewModel)
+                                .redacted(reason: .placeholder)
+                                .shimmering()
+                        }
+                        .background(Constants.listForeground)
                     }
                 }
-                .listStyle(PlainListStyle())
             }
         }
-        .background(Color(.listBackground).ignoresSafeArea())
+        .background(Constants.listBackground.ignoresSafeArea())
         .navigationTitle(Localization.title)
         .onAppear {
             viewModel.onLoadTrigger.send()
@@ -53,6 +50,12 @@ struct Inbox: View {
 }
 
 private extension Inbox {
+
+    enum Constants {
+        static let listForeground: Color = Color(.listForeground)
+        static let listBackground: Color = Color(.listBackground)
+    }
+
     enum Localization {
         static let title = NSLocalizedString("Inbox", comment: "Title for the screen that shows inbox notes.")
         static let emptyStateTitle = NSLocalizedString("Congrats, you’ve read everything!",

WooCommerce/Classes/ViewRelated/Inbox/InboxNoteRow.swift

@@ -67,13 +67,9 @@ struct InboxNoteRow: View {
             }
                    .padding(Constants.defaultPadding)
 
-            if #available(iOS 15.0, *) {
-                // In order to show full-width separator, the default list separator is hidden and a `Divider` is shown inside the row.
-                Divider()
-                    .frame(height: Constants.dividerHeight)
-            }
+            Divider()
+                .frame(height: Constants.dividerHeight)
         }
-        .listRowInsets(.zero)
     }
 }
 

WooCommerce/Classes/ViewRelated/Orders/Order Creation/ProductsSection/AddProductToOrder.swift

@@ -21,8 +21,12 @@ struct AddProductToOrder: View {
                                        loadAction: viewModel.syncNextPage) {
                         ForEach(viewModel.productRows) { rowViewModel in
                             createProductRow(rowViewModel: rowViewModel)
+                                .padding(Constants.defaultPadding)
+                            Divider().frame(height: Constants.dividerHeight)
+                                .padding(.leading, Constants.defaultPadding)
                         }
                     }
+                                       .background(Color(.listForeground))
                 case .empty:
                     EmptyState(title: Localization.emptyStateMessage, image: .emptyProductsTabImage)
                         .frame(maxHeight: .infinity)
@@ -74,6 +78,11 @@ struct AddProductToOrder: View {
 }
 
 private extension AddProductToOrder {
+    enum Constants {
+        static let dividerHeight: CGFloat = 1
+        static let defaultPadding: CGFloat = 16
+    }
+
     enum Localization {
         static let title = NSLocalizedString("Add Product", comment: "Title for the screen to add a product to an order")
         static let close = NSLocalizedString("Close", comment: "Text for the close button in the Add Product screen")

WooCommerce/Classes/ViewRelated/Orders/Order Creation/ProductsSection/AddProductVariationToOrder.swift

@@ -21,11 +21,15 @@ struct AddProductVariationToOrder: View {
                                    loadAction: viewModel.syncNextPage) {
                     ForEach(viewModel.productVariationRows) { rowViewModel in
                         ProductRow(viewModel: rowViewModel)
+                            .padding(Constants.defaultPadding)
                             .onTapGesture {
                                 viewModel.selectVariation(rowViewModel.productOrVariationID)
                                 isPresented.toggle()
                             }
+                        Divider().frame(height: Constants.dividerHeight)
+                            .padding(.leading, Constants.defaultPadding)
                     }
+                    .background(Color(.listForeground))
                 }
             case .empty:
                 EmptyState(title: Localization.emptyStateMessage, image: .emptyProductsTabImage)
@@ -64,6 +68,11 @@ struct AddProductVariationToOrder: View {
 }
 
 private extension AddProductVariationToOrder {
+    enum Constants {
+        static let dividerHeight: CGFloat = 1
+        static let defaultPadding: CGFloat = 16
+    }
+
     enum Localization {
         static let emptyStateMessage = NSLocalizedString("No product variations found",
                                                          comment: "Message displayed if there are no product variations for a product.")

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/InfiniteScrollList.swift

@@ -30,15 +30,16 @@ struct InfiniteScrollList<Content: View>: View {
     }
 
     var body: some View {
-        List {
-            listContent
+        ScrollView {
+            LazyVStack(spacing: 0) {
+                listContent
 
-            InfiniteScrollIndicator(showContent: isLoading)
-                .onAppear {
-                    loadAction()
-                }
+                InfiniteScrollIndicator(showContent: isLoading)
+                    .onAppear {
+                        loadAction()
+                    }
+            }
         }
-        .listStyle(PlainListStyle())
     }
 }