[Woo POS] Design: Products Screen animation

[backwardstruck]

Closes: #12556

Description

This PR addresses a design concern on the Products Screen as outlined in issue #12556:

Item Addition Animation: Implemented a smooth slide-down animation for newly added products. This change makes the addition of items at the top more intuitive and visually pleasing, resolving the sudden shift previously observed.

Steps to reproduce

1. Navigate to POS.
2. Add a new product to the cart.
3. Add another product
4. Add more products
5. Verify that the new product slides in smoothly from the top, and the existing products move down gently.

Testing information

Tested on:

• Devices: tablet emulator and physical Samsung tablet
• Checked the smooth addition of new products and verified the animations are functioning as intended.

Videos

Dark mode

darkmode.mp4

Light mode

lightmode.mp4

The tests that have been performed

• Added multiple products and observed the animation.

• Removed products and ensured the layout adjusts without issues.

• Tested on different screen sizes to ensure consistent behavior.

• Checked for regressions or performance issues.

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if 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:

• 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.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• 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 big (tablet) and small (phone) in case of UI changes, and no regressions are added.

[wpmobilebot]

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

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	98a2533
	Direct Download	woocommerce-wear-prototype-build-pr12557-98a2533.apk

[wpmobilebot]

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

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	98a2533
	Direct Download	woocommerce-prototype-build-pr12557-98a2533.apk

[backwardstruck]

Thanks for this suggestion Michał.

[kidinov]

@backwardstruck 👋

A few notes:

• You are animating the Compose that has appearance animation already in place, so double animation
• You use state declared in the compose itself, so it'll animate everytime when it's recreated. Try to scroll the items in the cart - it will animate it everytime when a "view" reused. Notice that there is already state stored in the VM isAppearanceAnimationPlayed used for exactly this animation

Having said that, considering that it looks like in the Compose there is a bug/missing feature that shadows are gone when element is in animation. That's why I was trying to smooth this app with elevation being animated too, but it looks pretty bad anyway.

I'd advice asking Joe what looks better - no animation at all or animation how we can implement it in the moment

[backwardstruck]

@backwardstruck 👋

A few notes:

• You are animating the Compose that has appearance animation already in place, so double animation
• You use state declared in the compose itself, so it'll animate everytime when it's recreated. Try to scroll the items in the cart - it will animate it everytime when a "view" reused. Notice that there is already state stored in the VM isAppearanceAnimationPlayed used for exactly this animation

Having said that, considering that it looks like in the Compose there is a bug/missing feature that shadows are gone when element is in animation. That's why I was trying to smooth this app with elevation being animated too, but it looks pretty bad anyway.

I'd advice asking Joe what looks better - no animation at all or animation how we can implement it in the moment

Thanks for the info @kidinov Just to confirm, you are referring to the existing elevation and alpha animations as causing the double animation, right? If so, I agree that we can't have those if I am also adding a new animation.

I will use VM state, like isAppearanceAnimationPlayed going forward to ensure that my animations behave consistently.

[kidinov]

@backwardstruck

Just to confirm, you are referring to the existing elevation and alpha animations as causing the double animation, right? If so, I agree that we can't have those if I am also adding a new animation.

Yep!

The question is, what will be the difference, though? My understanding is the existent animations are close/the same as what you are adding with animated visibility, and the current ones aren't good.

So we either improve those (as mentioned, the main issue is that the shadows are gone during animation) or maybe we remove the animation. I am not sure what's better

[backwardstruck]

@kidinov I checked again against trunk and now I think it may be OK to add my animation since it mainly affects how the existing items in the list are animated.

Here's what I see in testing:

Trunk

trunk.mp4

This PR

PR1.mp4

Indeed, the elevation and alpha animations already in trunk are a bit harder to see in my PR because it's also sliding in the item from the top. I agree we should check with @joe-keenan to see if any of these animations are what's actually needed.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 40.64%. Comparing base (f7a50f4) to head (98a2533).
Report is 23 commits behind head on trunk.

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk   #12557      +/-   ##
============================================
- Coverage     40.64%   40.64%   -0.01%     
+ Complexity     5675     5674       -1     
============================================
  Files          1229     1229              
  Lines         69178    69178              
  Branches       9579     9579              
============================================
- Hits          28120    28119       -1     
  Misses        38475    38475              
- Partials       2583     2584       +1     

Flag	Coverage Δ
	40.64% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[joe-keenan]

Looks pretty good, just a couple things: The animation is a little slow, and the shadow still appears last, after the card has faded in.

Could you speed it up, and have the shadow fade in with the card?

[kidinov]

@backwardstruck 👋

fadeIn and fadeOut animations are the animations that change alpha. So you have 2 animations now that do the same. So probably

    val alpha by animateFloatAsState(
        targetValue = if (hasAnimationStarted) 1f else 0f,
        animationSpec = tween(
            durationMillis = 200,
            easing = LinearEasing
        ),
        label = "alpha"
    )

should be removed

[backwardstruck]

Looks pretty good, just a couple things: The animation is a little slow, and the shadow still appears last, after the card has faded in.

Could you speed it up, and have the shadow fade in with the card?

Thanks for the feedback @joe-keenan I just pair programmed with @kidinov to speed up the animations. The shadow still appears last but it's not coinciding with an elevation change, which hopefully looks better. We can revisit this after the DM by potentially upgrading to a newer version of Jetpack Compose. That may include a fix for the shadow issue we are working around in this PR.

FYI: You can see the new animation in the video recordings at the top of this PR in the description. Let me know if you want us to make more changes in a follow up PR.

[kidinov]

LGTM! Left one np; feel free to merge

[joe-keenan]

That is nicer. Too bad about the shadow, but I can live with it after those other improvements.

Dark mode looks a little odd, the way the background appears at the same time as the shadow, but it’s not a big stress.