Efficient Way to Animate Big Content Changes in a LazyColumn

Question

I have a fully functional list, containing a complex item... a list of complex Composables, that is. I use LazyColumn for the job, but I then wished to allow the user to long-press on an item and then change its content and background.

Using animateColorAsState(), the background transitions smoothly, but since I was using Layout to render each item, because it depends on an entire unique positioning algorithm, I did something like this to animate the changes:

var selected: Boolean = ... // Consider this a state-holder, it will correctly change on long-pressing

Layout(
 content = {
    // I render here based on the state.
    if (selected){ Render1() }
    else Render2()
 }
){
 // Using the same for positioning here
 layout(...){
   if(selected)
     positionRender1()
   else positionRender2()
 }
}

This does seem to work as expected here, but the question is, which is better for performance - the one above or the one below?. Also, an explanation along with the answer would be appreciated.

var selected: Boolean = ... // Consider this a state-holder, it will correctly change on long-pressing

AnimatedContent(targetState = selected){
  if(it)
    Layout( content = { Render1() } ){
     layout(...){
       positionRender1()
     }
    }
  else
    Layout( content = { Render2() } ){
      layout(...){
        positionRender2()
      }
    }
  }
}