[Woo POS] Processing payment animation
Closes: #13696
Description
This PR replaces the static icon used on Processing states with an animated waves image.
I've used a ProgressView as that seemed like it had good semantic meaning.
I couldn't get all the values I needed out of Figma, so this is done by eye – comments welcome. Particularly the arc radii and lengths are the product of trial and error.
I deliberately hid the progress view from accessibility when showing on the "Show Card Reader Message" view, as it feels secondary, even misleading there. The payment isn't processing, the system is waiting on user action like "Remove Card".
Steps to reproduce
- Launch the app and enter POS mode
- Connect a card reader
- Add something to the cart and check out
- Tap your card
- Observe that the waves shown are animated during the processing step.
Testing information
I've tested this on an iPad running iOS 16
I tested dark mode, accessibility, and transitions.
No unit tests as it's UI only.
Screenshots
https://github.com/user-attachments/assets/cf5d1535-969d-44f5-a9d6-bfe2e1a5158c
- [x] I have considered if this change warrants user-facing release notes and have added them to
RELEASE-NOTES.txtif necessary.
Reviewer (or Author, in the case of optional code reviews):
Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:
- [x] The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
- [x] Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
- [x] Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.
| 2 Warnings | |
|---|---|
| :warning: | View files have been modified, but no screenshot or video is included in the pull request. Consider adding some for clarity. |
| :warning: | This PR is assigned to the milestone 20.2. This milestone is due in less than 2 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline. |
Generated by :no_entry_sign: Danger
Only the AppCenter upload failed, retrying the build
📲 You can test the changes from this Pull Request in WooCommerce iOS by scanning the QR code below to install the corresponding build.
| App Name | ||
| Build Number | pr13753-6e539e0 | |
| Version | 20.1 | |
| Bundle ID | com.automattic.alpha.woocommerce | |
| Commit | 6e539e046edc1bb1bc384497e87d21d1243e8f16 | |
| App Center Build | WooCommerce - Prototype Builds #10641 |