IssueTracker

Using snapshot 11690605, ListDetailPaneScaffold and SupportingPaneScaffold have broken animations. It's difficult to describe the issues, so I'm attaching two videos:

1. "ldps 3 panes.mp4" shows a ListDetailPaneScaffold using all three panes. The list is red, the detail is green, and the extra is blue. The list has buttons to trigger navigator.navigateTo and all panes use an AnimatedPane as the root composable with Modifier.background(someColor).safeContentPadding() to color them. Animation scale is set to 5x.

2. "sps.mp4" shows a SupportingPaneScaffold with one pane showing at a time. A single button is in the main pane and the supporting pane just has a light purple background with text. Animation scale is set to 10x.

There are several different issues that I see:

• When switching panes, the color applied as a modifier on the AnimatedPane applies to the new area immediately but the content animates in separately
• When going back in SPS while showing a single pane, the background from the supporting pane is shown even while the content of the main pane is displayed; the background does not correct itself until the animation is complete
• The content is clipped by safeContentPadding during the animation
• When showing the List pane and Extra pane, tapping to show the Detail pane causes the Extra pane content that's already on the screen to briefly resize for a few frames. It looks like a bounding box is expanding so the word "extra" has a line break that moves ~one character a frame.
• A Button used in AnimatedPane takes up the full space it is given; if a Box is used instead of AnimatedPane, the Button just uses its intrinsic size

I'm not sure if all of these are the same root issue or if this should be split up. Let me know if it's worth splitting this into multiple tickets or if I can provide more details.

Example code:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun LdpsTest() {
    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

    BackHandler(navigator.canNavigateBack()) {
        navigator.navigateBack()
    }
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            AnimatedPane(
                Modifier
                    .background(Color.LightRed)
                    .safeContentPadding()) {
                Column {
                    Button(onClick = { navigator.navigateTo(ListDetailPaneScaffoldRole.Detail) }) {
                        Text("Detail pane")
                    }
                    Button(onClick = { navigator.navigateTo(ListDetailPaneScaffoldRole.Extra) }) {
                        Text("Extra pane")
                    }
                }
            }
        },
        detailPane = {
            AnimatedPane(
                Modifier
                    .background(Color.LightGreen)
                    .safeContentPadding()
            ) {
                Text("Detail")
            }
        },
        extraPane = {
            AnimatedPane(
                Modifier
                    .background(Color.LightBlue)
                    .safeContentPadding()
            ) {
                Text("Extra")
            }
        }
    )
}

val Color.Companion.LightRed: Color
    get() = Color(red = 1f, green = 0.8f, blue = 0.8f, alpha = 1f)
val Color.Companion.LightGreen: Color
    get() = Color(red = 0.8f, green = 1f, blue = 0.8f, alpha = 1f)
val Color.Companion.LightBlue: Color
    get() = Color(red = 0.8f, green = 0.8f, blue = 1f, alpha = 1f)