URL with size parameters - how to implement without subcomposition

[pavelsidyakin-warnermedia]

Assume that remote image URLs can have size parameters - to load an image of the exact size as the target view.
Examples: https://fpoimg.com, https://placekitten.com/ etc.

So, we need to pass the size of a view to the request.
This can be easily achieved using BoxWithConstraints.

Example with BoxWithConstraints

@Composable
fun SubComposeAdaptiveRemoteImage(
    modifier: Modifier = Modifier,
    contentDescription: String? = null,
) {
    BoxWithConstraints(modifier = modifier) {
        Image(
            modifier = Modifier.fillMaxSize(),
            painter = rememberAsyncImagePainter(
                model = if (maxWidth.value > 0 && maxHeight.value > 0) {
                    val widthPx = constraints.maxWidth
                    val heightPx = constraints.maxHeight
                    val url = SAMPLE_URL_MASK.format(widthPx, heightPx)

                    ImageRequest.Builder(LocalContext.current)
                        .data(url)
                        .size(Size(widthPx, heightPx))
                        .build()
                } else {
                    null
                },
                placeholder = ColorPainter(Color.Yellow),
                error = ColorPainter(Color.Red),
                contentScale = ContentScale.Crop,
            ),
            contentDescription = contentDescription,
        )
    }
}

However, since BoxWithConstraints is implemented over SubcomposeLayout, it has limitations, like we cannot use intrinsic measurements for the parent. Example use-case - a text with background: background should be fillMaxSize and for the parent we can use intrinsic size.

I want to implement an async image container without using SubcomposeLayout.

Here is a try

@Composable
fun AdaptiveRemoteImage(
    modifier: Modifier = Modifier,
) {
    Box(modifier = modifier) {
        val context = LocalContext.current.applicationContext
        val painter = rememberAsyncImagePainter(
            model = ImageRequest.Builder(context)
                .data(Any())
                .build(),
            imageLoader = context.imageLoader.newBuilder()
                .logger(DebugLogger())
                .components {
                    add { chain ->
                        val (widthPx, heightPx) = chain.size.run {
                            (width as Dimension.Pixels).px to (height as Dimension.Pixels).px
                        }
                        val url = SAMPLE_URL_MASK.format(widthPx, heightPx)

                        chain.proceed(
                            chain.request.newBuilder()
                                .data(url)
                                .build()
                        )
                    }
                }
                .build(),
            placeholder = ColorPainter(Color.Yellow),
            error = ColorPainter(Color.Red),
            contentScale = ContentScale.Crop,
        )
        Image(
            modifier = Modifier
                .fillMaxSize(),
            painter = painter,
            contentDescription = null,
        )
    }
}

Full sample is here:
https://github.com/PavelSidyakin/Coil-Size-Url-Parameters-Demo

But it doesn't work correctly - when the view's size changes, the image is just scaled and an image with the new size is not requested.
Current result:

Expected result: the views with and without subcomposition behave the same - an image with a new size is requested and displayed.