How to remove the delay when changing colors for Scaffold and TopBar (Material 3)?

Question

When I change the value of the containerColor variable, the color first changes for the entire Scaffold and only then the color of the topBar changes. There is a noticeable delay of approximately 300 milliseconds.

var containerColor by remember { mutableStateOf(Color.White) }

Scaffold(
    containerColor = containerColor,
    topBar = {
        TopAppBar(
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = containerColor
            )
        )
    }
)

How can this be fixed?

Answer 1

The changes of container color of TopAppBar are animated down in SingleRowTopAppBar here:

val appBarContainerColor by animateColorAsState(
    targetValue = colors.containerColor(fraction),
    animationSpec = spring(stiffness = Spring.StiffnessMediumLow)
)

You can make compose not to reuse the same "instance" of TopAppBar but rather create a new one when the color changes, which will do the change immediately, like this:

var containerColor by remember { mutableStateOf(Color.White) }

Scaffold(
    containerColor = containerColor,
    topBar = {
        key(containerColor) {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = containerColor
                )
            )
        }
    }
)