how can I do crossfade, but only on specific state...

# compose

[Peter]

how can I do crossfade, but only on specific state changes? Example in 🧵

[Peter]

In the following example, I want to only do crossfade animation when the state changes between Loading, Countdown and Finished. I do not want to crossfade when Countdown changes to Countdown.

import androidx.compose.animation.Crossfade
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.tooling.preview.Preview
 import kotlinx.coroutines.delay
 import kotlin.time.Duration
 import kotlin.time.Duration.Companion.seconds
 
 sealed interface State {
     data object Loading: State
     data class Countdown(val duration: Duration) : State
     data object Finished: State
 }
 
 @Preview
 @Composable
 private fun Preview() {
     var state: State by remember { mutableStateOf(State.Loading) }
 
     LaunchedEffect(Unit) {
         delay(2.seconds)
 
         (3 downTo 0).forEach {
             state = State.Countdown(it.seconds)
             delay(1.seconds)
         }
         
         state = State.Finished
     }
     
     Crossfade(state, label = "your mom") { 
         when (state) {
             is State.Countdown -> TODO()
             State.Finished -> TODO()
             State.Loading -> TODO()
         }
     }
 }

[Stylianos Gakis]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/animation/animation/src/commonMain/kotlin/androidx/compose/animation/Crossfade.kt;l=98?q=Crossfade
Use contentKey and make all instances of Countdown return the same thing

[Peter]

Ah, cool, thank you!