@Model

@Composable
fun Image(url: String, aspectRatio: Float) {
    var image by +state<Image?> { null }
    var drawable by +state<Drawable?> { null }
    +onCommit(url) {
        val picasso = Picasso.get()
        val target = object : Target {
            override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
                // TODO(lmr): we could use the drawable below
                drawable = placeHolderDrawable
            }

            override fun onBitmapFailed(e: Exception?, errorDrawable: Drawable?) {
                drawable = errorDrawable
            }

            override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
                image = bitmap?.let { AndroidImage(it) }
            }
        }
        picasso
            .load(url)
            .into(target)

        onDispose {
            image = null
            drawable = null
            picasso.cancelRequest(target)
        }
    }
    // TODO(lmr): what's the best way to do aspect ratio here, and have the image fill the available
    // width?
    Container(height = 100.dp * aspectRatio, width = 100.dp) {
        val theImage = image
        val theDrawable = drawable
        if (theImage != null) {
            DrawImage(image = theImage)
        } else if (theDrawable != null) {
            Draw { canvas, parentSize -> theDrawable.draw(canvas.nativeCanvas) }
        }
    }
}

Image