google / accompanist

A collection of extension libraries for Jetpack Compose
https://google.github.io/accompanist
Apache License 2.0
7.43k stars 598 forks source link

[Placeholder] Padding is duplicated around placeholder #1539

Closed ln-12 closed 1 year ago

ln-12 commented 1 year ago

Describe the bug

When using the placeholder modifier it seems like the padding which is applied before is duplicated. For the test below I want to display the placeholder with exact the same size for the element or for the full column. When I change the padding of the second inner column from 8.dp to 4.dp, is is displayed correctly but that's not how I would expect it to work.

To Reproduce

@Composable
fun ShimmerScreen() {
    Surface(
        modifier = Modifier.fillMaxSize()
    ) {
        val showShimmer by produceState(initialValue = true) {
            delay(5_000)
            value = false
        }

        Column(
            horizontalAlignment = Alignment.Start,
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
                    .border(1.dp, Color.Red)
            ) {
                Text(
                    text = "Some text some text some text some text some text some text some text",
                    modifier = Modifier.placeholder(
                        visible = showShimmer,
                        highlight = PlaceholderHighlight.shimmer(),
                    )
                )
            }

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
                    .border(1.dp, Color.Red)
                    .placeholder(
                        visible = showShimmer,
                        highlight = PlaceholderHighlight.shimmer(),
                    )
                    .border(1.dp, Color.Red)
            ) {
                Text(text = "Some text some text some text some text some text some text some text")
            }

            Row {
                Box(modifier = Modifier.size(8.dp).background(Color.Red))
                Spacer(modifier = Modifier.weight(1f))
                Box(modifier = Modifier.size(8.dp).background(Color.Red))

            }
        }
    }
}

Expected behavior

The padding is not duplicated. I would expect the two red borders one the seconds inner column to overlap, so that there is not padding between the at all.

Screenshots?

Here I am using 8.dp around the placeholder (wrong end result, wrong behaviour):

image

Here I am using 4.dp(right end result, still wrong behaviour):

image

Environment:

Additional context

Am I missing something or is this indeed broken? I cannot move the padding after the shimmer modifier as the shimmer would then take the whole row which is not intended.

alexvanyo commented 1 year ago

I believe this is a duplicate of #1525 , which was fixed and should be available in the next release.

alexvanyo commented 1 year ago

The fix should be available in 0.29.2-rc which was just released.