Is there a way to delay/postpone shared element tr...

# compose-android

[Jonathan]

Is there a way to delay/postpone shared element transitions? I have a basic List/Details structure in my app and I would like to animate the thumbnail and title between the two screens. Under normal circumstances the needed data is already available from the list screen but I’d like to support deep-linking to the details screen. In the deep-linking use case the data very likely won’t be loaded and shared element transition isn’t relevant here. I’m not sure if its possible to reuse a shared element transition details screen as a deep-linkable details screen. Has anyone played with this or is knowledgable on the matter? I suspect I may need to have a dedicated route to handle deep-linking and doesn’t have any of the shared element logic.

[Stylianos Gakis]

If you're deep linking there the shared elements will simply not animate at all and that should be it right?
What is the issue you're facing exactly when you do this?

[Jonathan]

Sorry for the last response…
I’m not facing an issue yet; as I haven’t finished building the code. The concern I have is that if in my destination (details screen w/ shared element transition). I need to fetch details asynchronously from my repo, will this essentially break shared element transition animation since the data to animate isn’t available immediately to create the “seamless” transition?

[Stylianos Gakis]

Yes, that's something which can happen.

One approach is that you pre-load the data, so your detail screen fetches the information from disk instead of from network, so it's near instant.

If that's not possible, you could have placeholder UI components where the shared element APIs are applied to, so while you're in the transition you have some shapes to match to immediately in the animation, but the content itself can come later. I suppose it really depends on what your UI and your shared element transition looks like.

[Jonathan]

In the normal use case were the navigation is happening from the list screen. The data will already be loaded. I would like to setup my details screen to handle transparently navigating from the list screen or deep-linking so the details must be loaded asynchronously from the my repo. I’m concern if the asynch nature will break the share element transition. I’ve considered passing the shared element content values (image URL) around as navigation arguments (they’d be properties on my Navigation class) but wanted to see if there was a better way to achieve what I wanted.

[Stylianos Gakis]

In one place we had this use case I did exact that. I wanted the shared element part to be some sort of card, so I made sure to pass the data for that part only in the screen parameters so that it was available on the first frame. Then the rest comes from the data source asynchronously.
This way in deep links since that input is missing, then everything comes from the data source, including that part of the shared element.