Component in same hierarchy as AsycImage cannot render when used together with IntrinsicSize

[vincent-paing]

Describe the bug

I'm building a UI where there is a left hand size and right hand size. Image are on the right and the left hand size's content will scale to the maximum available height.

Similar to this UI:

When using the following code, the text inside the same Column as the ASyncImage view are not rendered. You can replicate this with following code:

 Row(
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .fillMaxWidth()
    ) {
        Column(
            modifier = Modifier
                .fillMaxHeight()
                .padding(end = 16.dp, start = 16.dp)
        ) {
            Image(
                imageVector = Icons.Default.Check,
                contentDescription = null
            )

            VerticalDivider(
                modifier = Modifier
                    .fillMaxHeight()
                    .align(Alignment.CenterHorizontally)
                    .width(1.dp)
            )
        }


        Column {
            AsyncImage(
                model = "https://fastly.picsum.photos/id/1077/1000/500.jpg?hmac=Uri1xzECqflU1kLIIKwN4JByLcTIIoGx8ih5XLpps9I",
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth()
            )

            Text("This is not rendered!")
        }
    }

And it will produce the following result when the app is run on a device. Notice that the the last text "This is not rendered!" is not visible

However, I also found a workaround that using a combination of Image + rememberAsyncImagePainter works correctly. In the above code, change AsyncImage to following:

Image(
    painter = rememberAsyncImagePainter(model = "https://fastly.picsum.photos/id/1077/1000/500.jpg?hmac=Uri1xzECqflU1kLIIKwN4JByLcTIIoGx8ih5XLpps9I"),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

And the text is now rendered correctly:

I believe this bug is in AsyncImage as the behavior between using AsyncImage and Image + rememberAsyncImagePainter should be the same for simple use cases like this. Could be a bug with AsyncImage not being able to layout correctly when using with IntrinsicSize

Version
Coil 3.3.0 but maybe also affecting older versions

[colinrtwhite]

@vincent-paing Thanks for reporting! I tried reproducing the issue on a branch here, but it looks OK to me:

Are you able to reproduce the issue on the latest snapshot? If you are could you create a small project that reproduces the issue. Thanks!

[colinrtwhite]

Please open a new ticket with a way to reproduce this if you're still running into this issue.

[vincent-paing]

Are you able to reproduce the issue on the latest snapshot? If you are could you create a small project that reproduces the issue. Thanks!

Apologies for late reply. I followed the doc to try the snapshot but seems it is not published yet?

 Could not find io.coil-kt.coil3:coil-compose:3.4.0-SNAPSHOT.
     Searched in the following locations:
       - https://oss.sonatype.org/content/repositories/snapshots/io/coil-kt/coil3/coil-compose/3.4.0-SNAPSHOT/maven-metadata.xml
       - https://oss.sonatype.org/content/repositories/snapshots/io/coil-kt/coil3/coil-compose/3.4.0-SNAPSHOT/coil-compose-3.4.0-SNAPSHOT.pom

Nvm, I tried with https://central.sonatype.com/repository/maven-snapshots/ and it works. I'll make a PR to update the docs

[vincent-paing]

@colinrtwhite In your branch, you're using explicit size 100dp here: https://github.com/coil-kt/coil/blob/colin/issue_3260/samples/compose/src/commonMain/kotlin/sample/compose/App.kt#L343. Try with fillMaxWidth and you will observe that it doesn't work. You can copy paste the example I posted in the PR description and change the text. Could we reopen the issue or create a new one?