Paparazzi // Jetpack compose // Placeholder is not displayed in the Row

[ivk1800]

Describe the bug
Placeholder is not displayed in tests if there are more than one tests. Important point, AsyncImage is in a Row.

To Reproduce
Here is the test I used to confirm the behavior.
Result:

testContentCompose1: Placeholder is red.
testContentCompose2: Placeholder is not displayed.

import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import app.cash.paparazzi.Paparazzi
import coil.compose.AsyncImage
import com.google.accompanist.drawablepainter.rememberDrawablePainter
import org.junit.Rule
import org.junit.Test

internal class RowTest {
    @get:Rule
    val paparazzi = Paparazzi()

    @Test
    fun testContentCompose1() {
        shot()
    }

    @Test
    fun testContentCompose2() {
        shot()
    }

    private fun shot() {
        paparazzi.snapshot {
            Column(
                modifier = Modifier.background(androidx.compose.ui.graphics.Color.Black)
            ) {
                LazyRow(
                    contentPadding = PaddingValues(horizontal = 10.dp),
                    horizontalArrangement = Arrangement.spacedBy(10.dp),
                    verticalAlignment = Alignment.Top,
                    content = {
                        items(3) {
                            CustomImage(modifier = Modifier.size(25.dp),)
                        }
                    },
                )
                Box(modifier = Modifier.height(50.dp))
                CustomImage()
            }
        }
    }

    @Composable
    private fun CustomImage(
        modifier: Modifier = Modifier,
    ) {
        val placeholderDrawable = remember { ColorDrawable(Color.RED) }
        val placeholderPainter = rememberDrawablePainter(placeholderDrawable)
        AsyncImage(
            modifier = modifier.border(1.dp, androidx.compose.ui.graphics.Color.White),
            model = "",
            placeholder = placeholderPainter,
            error = placeholderPainter,
            contentScale = ContentScale.FillBounds,
            contentDescription = null,
        )
    }
}

Logs/Screenshots

testContentCompose1	testContentCompose2
	l

Version
coil: 2.2.0, 2.3.0
paparazzi: 1.2.0

[colinrtwhite]

Thanks for the repro test case! This looks related to #1711. I think removing the mapping here should fix this, though we'll need to make sure removing it doesn't have side effects.

[ivk1800]

@colinrtwhite btw it is reproduced with custom drawable as

class PlaceholderDrawable() : Drawable() {
...
}

[colinrtwhite]

Hmm this does look different than #1711 actually.

[yayahassani]

I have the same issue while showing images in a Row.

[colinrtwhite]

Just checked this test case with Coil 3.1.0 and it works as expected (all red boxes).

[hannahermsen-ns]

We are still able to reproduce this problem in our project. The AsyncImage is drawn in a row. We use Coil 3.1.0.

[colinrtwhite]

@hannahermsen-ns Please open a new issue with a reproducible test case. The test case provided in this issue works as expected in 3.1.0.