[WOOPRD-470][Woo POS][Product search] Implement animation of navigating to the search #13993
Conversation
Generated by 🚫 Danger |
📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.
|
|
📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.
|
…for-empty-query' into wooprd-470-woo-posproduct-search-implement-animation-of-navigating-to
…animation-of-navigating-to
…animation-of-navigating-to
There was a problem hiding this comment.
Pull Request Overview
This PR implements new animations and transitions for the POS product search, including refined padding adjustments and state transitions between search, product, and coupon screens. Key changes include:
- Reordering of the padding and scroll modifiers for the empty search query state.
- Updated toolbar transitions using Box, fadeIn/fadeOut animations, and a dedicated animation duration constant.
- Replacement of conditional Composables with a Crossfade transition in the items screen and refactoring of animation logic in the search input component.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| WooPosItemsEmptySearchQueryStateScreen.kt | Adjusted modifier chaining to fix padding alignment for the empty search state. |
| WooPosItemsToolbar.kt | Modified layout structure and refined search state animation transitions. |
| WooPosItemsScreen.kt | Introduced Crossfade to switch between product, search, and coupon screens. |
| WooPosSearchInput.kt | Rewritten animation logic, replacing custom transitions with AnimatedVisibility and focus-based animations. |
Comments suppressed due to low confidence (3)
WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/common/composeui/component/WooPosSearchInput.kt:218
- [nitpick] Ensure that combining focusRequester with onFocusChanged in the Modifier chain does not introduce unintended side effects with the component's animations.
.onFocusChanged { focusState -> isFocused = focusState.isFocused }
WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/search/WooPosItemsEmptySearchQueryStateScreen.kt:62
- Confirm that reordering .verticalScroll() and .padding() is intended, as the change in modifier order could affect the layout's scroll behavior.
.padding(top = WooPosSpacing.Large.value.toAdaptivePadding())
WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/items/WooPosItemsScreen.kt:112
- [nitpick] Verify that the Crossfade transition with a 300ms tween duration provides smooth performance on lower-spec devices, given that it replaces multiple conditional Composables.
Crossfade(
…animation-of-navigating-to
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## trunk #13993 +/- ##
============================================
- Coverage 38.29% 38.28% -0.01%
Complexity 9496 9496
============================================
Files 2118 2118
Lines 116436 116446 +10
Branches 14937 14927 -10
============================================
+ Hits 44585 44586 +1
- Misses 67774 67783 +9
Partials 4077 4077 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
👋 @kidinov, the app is crashing on config change with the following error:
java.lang.IllegalStateException: MutableState(value=Open(input=Hint(hint=Search products), isLoading=false, hasAnimationPlayed=true))@83275281 cannot be saved using the current SaveableStateRegistry. The default implementation only supports types which can be stored inside the Bundle. Please consider implementing a custom Saver for this class and pass it to rememberSaveable().
Steps to repro:
- Go to POS
- Click Search
- Switch theme mode
This seems to be introduced in this PR.
…-implement-animation-of-navigating-to' into wooprd-470-woo-posproduct-search-implement-animation-of-navigating-to
|
@samiuelson Good catch! Fixed that here |
Closes: #WOOPRD-470
Description
Figma link in the issue
Steps to reproduce
In debug builds, it's slower, so to test properly, use release build with FFs ON
@malinajirka your feedback is welcome here!
The tests that have been performed
Above
Images/gif
05-01--11-43.mp4
05-01--12-02.mp4
RELEASE-NOTES.txtif necessary. Use the "[Internal]" label for non-user-facing changes.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: