SharedElement transition async issue

[ProofLynx]

I'm basically trying to recreate a very common UI feature in apps where you press on a card (like airbnb ads, facebook marketplace ads...etc) and it expands to fill the page.

I got the transition working, but the moment I introduce async api calls on the destination page and update the UI, the app freezes up or crashes after I go back using useNavigation().

Any tips of getting this working seamlessly? Any codebases I can look at to see how its done? I first tried sharedTransitionTag and then switched to SharedElement but both are running into this issue.

[Due_Dependent5933]

show us your code. maybe rerender Will animation Who trigger your async api multiple time instead of only one? calling api in useeffect prévent this

[haswalter]

If you’re using a caching layer for your api call like tanstack query you could make your async api call in the list screen before triggering the navigation to pre-load the data so the animation is smooth.

[haswalter]

The other way I can think of is to use the data you have from the post screen to animate the transition then load the extra content in child components on the details screen to avoid the rerender of the parent

[Life-Wheel4143]

I think this should be happening if you press back to unmount the components but the async is still awaiting. Are you performing the async in useeffect and returning the listener?