[POS as a tab i2] Streamline loading UI animation when transitioning from eligibility check to items loading #15922

jaclync · 2025-07-17T15:23:12Z

Just one review is required.

Why

For stores eligible for POS, when transitioning from eligibility check to items loading, both being async tasks, the spinner animation appears discontinuous during the transition.

How

This PR streamlines the animation by moving the eligibility state based UI from a separate view (entry point view) to the dashboard view with some refactoring on the view state. Other attempts on the loading UI animation side that did not work due to having 3 sets of animations using SwiftUI withAnimation which is reset when the view is redrawn (triggered when entering PointOfSaleDashboardView):

Updating IndefiniteCircularProgressViewStyle to only start the timer if there is no timer before, and disable invalidating the timer in onDisappear.
Extracting the animation states to be an ObservableObject owned by the entry point view and DI'ed to both loading use cases in the entry point view and dashboard view.
Replacing withAnimation entirely using CADisplayLink timer - I could not get it to match the previous animation 100%.

Description

This PR moves the eligibility state based UI from PointOfSaleEntryPointView to PointOfSaleDashboardView and refactors PointOfSaleEntryPointView view body to use a centralized ViewState approach with a view helper class, improving code maintainability and following the POS architecture guidelines.

Key Changes:

Created PointOfSaleDashboardViewHelper: A stateless helper that centralizes ViewState determination logic
ViewState enum: includes all cases in the top-level view body with associated values for the ineligible and error cases
Streamlined view logic: Replaced nested conditional checks with a clean switch statement
Test coverage: Added test cases for PointOfSaleDashboardViewHelper
Some adjustments to the ineligible UI presentation are required now that it's moved to PointOfSaleDashboardView, like updating the floating control visibility and adding the frame width to fit to parent width

Architecture Benefits:

Single source of truth: All view state logic centralized in the helper
Better separation of concerns: Helper handles state determination, view handles rendering
Improved testability: Helper is easily unit tested with comprehensive coverage
Cleaner code structure: Replace nested conditionals with clear switch statements

Steps to reproduce

Prerequisite: the store is in an eligible country (US/UK) and is one fixable reason away from being eligible for POS (e.g. unsupported currency, POS feature switch disabled for WC version 10.0+)

Log in to the store in the prerequisite if needed
Tap on the POS tab --> after loading UI, ineligible UI should be shown. the floating control should not be shown
Fix the ineligible reason
In the app, tap Retry --> it should enter loading UI to fetch products, and to the products loaded state
Smoke test the items operations a bit, like searching for products/coupons to ensure that the states work as before
Exit POS
Tap on the POS tab --> the loading animation should be continuous before reaching the items loaded state

Testing information

Tested on iPad Pro 11in 3rd generation device, iOS 18.5:

Horizontal size class changes using split view (compact, regular)
Eligibility states:
- Ineligible -> eligible after retry
- Eligible
Priority ordering (size class > eligibility > container state)
Error

Screenshots

Ineligible -> eligible with split screen testing:

ineligible-to-eligible.mp4

Eligible where the animation is now continuous:

eligible.mp4

I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

…to `PointOfSaleDashboardView` to enable continuous loading animation. UI state is determined by `PointOfSaleDashboardViewHelper`.

wpmobilebot · 2025-07-17T15:32:22Z

📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS Prototype
	Build Number	`pr15922-dda7a33`
	Version	`22.8`
	Bundle ID	`com.automattic.alpha.woocommerce`
	Commit	`dda7a33`
	Installation URL	1vfdki03fik8g

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

iamgabrielma

LGTM! 🚢

iamgabrielma · 2025-07-18T03:47:25Z

WooCommerce/WooCommerceTests/POS/Presentation/POSItemActionHandlerTests.swift

    @available(iOS 17.0, *)
    @Test func handleTap_when_attempt_to_add_duplicated_coupons_in_list_then_does_not_add_it_to_cart() async throws {
-        let aggregateModel = PointOfSaleAggregateModel(itemsController: MockPointOfSaleItemsController(),
+        let aggregateModel = PointOfSaleAggregateModel(entryPointController: POSEntryPointController(eligibilityChecker: MockPOSEligibilityChecker()),


nit: I think we can make a func makeAggregate() -> PointOfSaleAggregateModel helper in this test file, all cases seem to DI the same dependency into the SUT.

When running the tests locally, I encountered memory crashes with/without the improvements in ea85627 sometimes:

#0 0x0000000104c88874 in __pthread_kill () #1 0x000000010437a2ec in pthread_kill () #2 0x0000000180171ea8 in abort () #3 0x00000001801f4450 in malloc_vreport () #4 0x00000001801f4610 in malloc_report () #5 0x00000001801c3708 in ___BUG_IN_CLIENT_OF_LIBMALLOC_POINTER_BEING_FREED_WAS_NOT_ALLOCATED () #6 0x00000001803a7270 in -[__NSArrayM insertObject:atIndex:] () #7 0x000000010280d46c in +[WPAnalytics registerTracker:] at /Users/jaclynchen/Developer/woocommerce-ios/Modules/Sources/WordPressSharedObjC/Analytics/WPAnalytics.m:25 #8 0x000000010ba93674 in WooAnalytics.init(analyticsProvider:) at /Users/jaclynchen/Developer/woocommerce-ios/WooCommerce/Classes/Analytics/WooAnalytics.swift:43 #9 0x000000010ba9358c in WooAnalytics.__allocating_init(analyticsProvider:) () #10 0x0000000133db65fc in default argument 7 of makePointOfSaleAggregateModel(entryPointController:itemsController:purchasableItemsSearchController:couponsController:couponsSearchController:cardPresentPaymentService:orderController:analytics:collectOrderPaymentAnalyticsTracker:searchHistoryService:popularPurchasableItemsController:barcodeScanService:soundPlayer:paymentState:) at /Users/jaclynchen/Developer/woocommerce-ios/WooCommerce/WooCommerceTests/POS/Models/PointOfSaleAggregateModelTests.swift:1020 #11 0x0000000133dba018 in PointOfSaleAggregateModelTests.OrderStageTests.addMoreToCart_moves_to_building_order_stage() () #12 0x0000000133db9c58 in static PointOfSaleAggregateModelTests.OrderStageTests.$s16WooCommerceTests025PointOfSaleAggregateModelC0V010OrderStageC0V43addMoreToCart_moves_to_building_order_stage4TestfMp_9Z7114aedefMu_@Sendable () at /var/folders/dq/w2cq_v314913sdrjxwl5881c0000gn/T/swift-generated-sources/@__swiftmacro_16WooCommerceTests025PointOfSaleAggregateModelC0V010OrderStageC0V43addMoreToCart_moves_to_building_order_stage4TestfMp_.swift:7

But I didn't see any previous mentions from MGS, nor from CI failures. If it happens on CI, I'll revert the commit and we can look into improvements in the future.

All good on CI, merging now.

iamgabrielma · 2025-07-18T03:48:10Z

WooCommerce/WooCommerceTests/POS/Presentation/POSItemActionHandlerTests.swift

    @available(iOS 17.0, *)
    @Test func handleTap_when_attempt_to_add_duplicated_coupons_in_list_then_does_not_add_it_to_cart() async throws {
-        let aggregateModel = PointOfSaleAggregateModel(itemsController: MockPointOfSaleItemsController(),
+        let aggregateModel = PointOfSaleAggregateModel(entryPointController: POSEntryPointController(eligibilityChecker: MockPOSEligibilityChecker()),


nit: I think we can make a func makeAggregate() -> PointOfSaleAggregateModel helper in this test file, all cases seem to DI the same dependency into the SUT.

iamgabrielma · 2025-07-18T03:49:58Z

WooCommerce/WooCommerceTests/POS/ViewHelpers/PointOfSaleDashboardViewHelperTests.swift

+    @Test(arguments: [
+        PointOfSaleErrorState.errorOnLoadingProducts(),
+        PointOfSaleErrorState.errorOnLoadingVariations(),
+        PointOfSaleErrorState.errorOnLoadingCoupons(),
+        PointOfSaleErrorState.errorCouponsDisabled,
+        PointOfSaleErrorState.errorOnLoadingProductsNextPage(),
+        PointOfSaleErrorState.errorOnLoadingVariationsNextPage(),
+        PointOfSaleErrorState.errorOnLoadingCouponsNextPage(),
+        PointOfSaleErrorState.errorOnRefreshingCoupons(),
+        PointOfSaleErrorState.errorOnEnablingCoupons()
+    ])


nice SwiftTesting 💯

iamgabrielma · 2025-07-18T03:50:50Z

WooCommerce/WooCommerceTests/POS/ViewHelpers/PointOfSaleDashboardViewHelperTests.swift

+    // MARK: - Horizontal Size Class Tests
+
+    @available(iOS 17.0, *)
+    @Test func determineViewState_when_horizontalSizeClass_is_compact_returns_unsupportedWidth() async throws {


Interesting to see that with this approach we can now unit test unsupported widths, nice!

iamgabrielma · 2025-07-18T03:52:00Z

WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift

-                            case .coupons(search: true):
-                                await posModel.couponsSearchController.loadItems(base: .root)
-                            }
+            switch viewState {


much cleaner view hierarchy 💯

…te factory method with mocks as default.

…oaded` event.

jaclync added 2 commits July 17, 2025 11:21

PointOfSaleLoadingView: remove unused time tracking code.

bf13f8b

Move POS eligibility state based UI from PointOfSaleEntryPointView …

3318c19

…to `PointOfSaleDashboardView` to enable continuous loading animation. UI state is determined by `PointOfSaleDashboardViewHelper`.

jaclync added type: task An internally driven task. feature: POS labels Jul 17, 2025

jaclync added this to the 22.9 milestone Jul 17, 2025

jaclync changed the title ~~Refactor PointOfSaleDashboardView to use centralized ViewState with helper~~ [POS as a tab i2] Streamline loading UI animation when transitioning from eligibility check to items loading Jul 17, 2025

jaclync added 2 commits July 17, 2025 11:43

Fix ineligible UI not being fullscreen.

4eceb20

Update floating control visibility to hide for ineligible case.

ac82fdb

jaclync requested review from iamgabrielma and staskus July 17, 2025 17:18

iamgabrielma self-assigned this Jul 18, 2025

iamgabrielma approved these changes Jul 18, 2025

View reviewed changes

jaclync added 2 commits July 18, 2025 13:57

Move PointOfSaleAggregateModel initializer in test cases to a priva…

ea85627

…te factory method with mocks as default.

Revert changes in PointOfSaleLoadingView as it tracks `pointOfSaleL…

dda7a33

…oaded` event.

jaclync merged commit af9b54d into trunk Jul 18, 2025
13 checks passed

jaclync deleted the feat/WOOMOB-767-streamline-indefinite-circular-animation branch July 18, 2025 18:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[POS as a tab i2] Streamline loading UI animation when transitioning from eligibility check to items loading #15922

[POS as a tab i2] Streamline loading UI animation when transitioning from eligibility check to items loading #15922

jaclync commented Jul 17, 2025 •

edited

Loading

Uh oh!

wpmobilebot commented Jul 17, 2025 •

edited

Loading

Uh oh!

iamgabrielma left a comment

Uh oh!

iamgabrielma Jul 18, 2025

Uh oh!

jaclync Jul 18, 2025 •

edited

Loading

Uh oh!

jaclync Jul 18, 2025

Uh oh!

iamgabrielma Jul 18, 2025

Uh oh!

iamgabrielma Jul 18, 2025

Uh oh!

iamgabrielma Jul 18, 2025

Uh oh!

iamgabrielma Jul 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[POS as a tab i2] Streamline loading UI animation when transitioning from eligibility check to items loading #15922

[POS as a tab i2] Streamline loading UI animation when transitioning from eligibility check to items loading #15922

Conversation

jaclync commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

How

Description

Key Changes:

Architecture Benefits:

Steps to reproduce

Testing information

Screenshots

Uh oh!

wpmobilebot commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

iamgabrielma left a comment

Choose a reason for hiding this comment

Uh oh!

iamgabrielma Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

jaclync Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jaclync Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

iamgabrielma Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

iamgabrielma Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

iamgabrielma Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

iamgabrielma Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jaclync commented Jul 17, 2025 •

edited

Loading

wpmobilebot commented Jul 17, 2025 •

edited

Loading

jaclync Jul 18, 2025 •

edited

Loading