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 https://github.com/coil-kt/coil/issues/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.