ListItem - trailingAccessoryContent with Button causes jank

[caltseng]

We've been seeing jank in our list of items (with hundreds of items), and tracked it down to the trailingAccessoryContent. Removing trailingAccessoryContent makes the list scroll very fast. Our trailingAccessoryContent is also a single Fluent button, so it's really nothing super intense, and I was also able to repro with a vanilla Material button with not much in it. Interestingly, using a text view of a constant string ("hi") is also very fast.

From the Profile Trace via AS, it says the "measureAndLayout()" step is taking a long time, which is what also led me down this investigation path.

< Fluent Version 1.30.0 >

Behavior

• Case 1 - TrailingAccessoryContent with Fluent Button - Jank
  • trailingAccessoryContent = { Button(onClick = { }, text = "hi") { }}
• Case 2 - TrailingAccessoryContent with material Button - Jank
  • trailingAccessoryContent = { androidx.compose.material3.Button(onClick = { /*TODO*/ }) { }}
• Case 3 - TrailingAccessoryContent with Text("hi") - No Jank
  • trailingAccessoryContent = { Text("hi")}
• Case 4 - No TrailingAccessoryContent - No Jank

Relevant code / code in question - ListItem, line 411

            if (trailingAccessoryContent != null && textAlignment == ListItemTextAlignment.Regular) {
                Box(
                    Modifier
                        .padding(
                            top = if (trailingAccessoryContentAlignment == Alignment.Top) padding.calculateTopPadding() else 0.dp,
                            bottom = if (trailingAccessoryContentAlignment == Alignment.Bottom) padding.calculateBottomPadding() else 0.dp,
                            end = padding.calculateEndPadding(LocalLayoutDirection.current)
                        )
                        .fillMaxHeight(),
                    contentAlignment = trailingAccessoryAlignment
                ) {
                    trailingAccessoryContent()
                }
            }