fix(anim): prevent swipe back animation getting stuck / not completing

[capc0]

closes #22895

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #22895

While debugging the swipe back gesture I noticed that there are some race conditions where the animation is never stopped. The endlessly running animation blocks all further animations/routing of the entire app (e.g. back-button, tabs, ...).

This happens when the swipe back gesture is performed very fast (not fast in the sense of quickly performing the gesture multiple times like in issue #15154, but instead only performing it once which a fast finger movement). This can especially be reproduced in about 50% of cases when trying to perform the gesture with as little time and horizontal movement of your finger as possible on the far left side of the page/device.

Debugging actually shows, that the gesture ends (onEndHandler called in swipe-back.ts) BEFORE the animation actually started and the reference to the animation ani in route-outlet.tsx is set. Since the animation is progress-based and is only ever stopped by calling progressEnd, this leads to the endlessly running animation.

What is the new behavior?

The supplied fix handles this edge case where the swipe gesture should be stopped, but the animation reference is not yet set. In that case the result params are temporary stored within the route-outlet and as soon as the animation reference is set, the animation will be stopped gracefully.

Does this introduce a breaking change?

• Yes
• No

Other information

I have tested it in our apps in combination with PR #23125 and its working very well. The app always stays responsive and routing always works even after performing the wildest swipe animations.

[capc0]

im not sure why the linting task did not succeed - its ok if I run npm run lint in the core repo locally.

edit: nevermind - detected a trailing whitespace

[liamdebeasi]

Thanks for the PR! I am going to close this in favor of #23527 which resolves the issue.

There is a dev build in #22895 (comment) if you are interested in testing out the fix before it ships.

Thanks for all your help working to get this issue resolved!