How to make Jetpack Compose Image animating infinite

Question

I have an animated-vector drawable. I want this animated vector to be animated in loop while this image is showing. Cannot find a good solution for this.

        val image = animatedVectorResource(R.drawable.no_devices_animated)
        var atEnd by remember { mutableStateOf(false) }
        Image(
            painter = image.painterFor(atEnd),
            "image",
            Modifier.width(150.dp).clickable {
                atEnd = !atEnd
            },
            contentScale = ContentScale.Fit)

When I tap on the image it is animating but then stops. This is kind of an infinite progress.

Answer 1

According to https://developer.android.com/jetpack/compose/resources#animated-vector-drawables

val image = AnimatedImageVector.animatedVectorResource(R.drawable.animated_vector)
val atEnd by remember { mutableStateOf(false) }
Icon(
    painter = rememberAnimatedVectorPainter(image, atEnd),
    contentDescription = null
)

To make the animation loop infinitely:

val image = AnimatedImageVector.animatedVectorResource(id = vectorResId)
var atEnd by remember { mutableStateOf(false) }
Image(
    painter = rememberAnimatedVectorPainter(animatedImageVector = image, atEnd = atEnd),
    contentDescription = null,
)
LaunchedEffect(Unit) {
    while (true) {
        delay(animDuration)
        atEnd = !atEnd
    }
}