fix(wallet-mobile): tx history animation initial state #3124
Conversation
jorbuedo
requested review from
michaeljscript,
stackchain,
SorinC6 and
banklesss
| @@ -18,6 +18,10 @@ const useAnimatedTxHistory = () => { | |||
| })) | |||
|
|
|||
| React.useLayoutEffect(() => { | |||
| if (translateYOffset.value !== 0) { | |||
There was a problem hiding this comment.
translateYOffset.value is the shared value the blur and focus listeners are using. It's the position on the screen of the animated component. It starts being 2000 (so down below the visible screen) so that the animation can bring the component up into view.
This condition in particular checks that the component is not into view, to bring it into view.
The complexity of the component comes from having to listen to changes in navigation to animate in and out, plus the initial setup of the hook in which the listeners don't trigger (they're being setup), plus the different routes of the app: some using the same navigation without unmounting this hook, others unmounting this hook to use a different root component. Some transitions, like opening and closing the QR camera, interrupted the shared value animation, leaving it in an intermediate state different than 2000 or 0, so the component fell out of view when it was supposed to be in.
Between the previous changes to simplify the animation, and this condition to make sure it goes into view if it's not, everything should work as expected now.
There was a problem hiding this comment.
ty @jorbuedo now it makes sense to me, it also brings a question, just realized that all function calls on the txhistory should be wrapped within the InteractionManager, so it awaits until all animations have finished before triggering anything else.
There was a problem hiding this comment.
Mm depends on the functions I guess, we don't have to wait for the animation to finish before we start updating the wallet. Takes long enough already, no need to add the 1 sec of the animation.
There was a problem hiding this comment.
yap, the UI ones, like the navigations on the actions banner, it can be triggered while the animation on the history is still running
There was a problem hiding this comment.
i.e you pull it down, press Receive, it cuts the animation and move the user to the Receive funnel
Signed-off-by: Juliano Lazzarotto <[email protected]>
stackchain
changed the title
related: #3123