Can AnimatedContent work correctly if the identical target state is issued multiple times?

Question

I'm implementing AnimatedContent and I'm noticing that when my state issues the same target as is currently displaying (when new paged results for a list are issued from the view model) AnimatedContent is performing its transition even though it is currently displaying the correct composable content. Is there a work around for this?

AnimatedContent(
    targetState = display, <- display is issued multiple times with updated paged data
    modifier = Modifier.fillMaxSize(),
    transitionSpec = {
        fadeIn() with fadeOut()
    },
    content = { display -> content(display) }
)

Also, if I test for this condition (test if the current target is the same as the incoming target) and call content() outside of AnimatedContent, this seems to interrupt the transition if multiple states are issued in quick succession for this target state. This happens when I'm displaying a page that has sections of content that fill in async from different network api responses.

Answer 1

You can customise the transition by referencing the initialState and targetState properties within transitionSpec:

AnimatedContent(
    targetState = display,
    modifier = Modifier.fillMaxSize(),
    transitionSpec = {
        when {
            initialState != targetState -> fadeIn() with fadeOut()
            else -> EnterTransition.None with ExitTransition.None
        }
    },
    content = { display -> content(display) }
)

In this example we avoid a visible animation in the case that initialState == targetState.