lottie animation gets recomposed when i scroll which is inside the lazyColumn

Question

I am creating a stack animation that contains a list of animations. The animation is inside a LazyColumn, and when I scroll, the LazyColumn gets recomposed. However, the Lottie animation also gets recomposed or called, which starts from the beginning. How can I prevent the animation from recomposing when I scroll?

@Composable
fun Container(context: Context) {
val items = remember { List(10) { "Item $it" } }
Box(
    modifier = Modifier
        .background(color = Color.White)
        .fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Column(
        Modifier.fillMaxHeight(),
        Arrangement.Center
    ) {
        Box(
            modifier = Modifier
                .size(200.dp, 500.dp)
                .clip(shape = RoundedCornerShape(size = 12.dp))
                .background(color = Color(0xFF82D8FF)),
            contentAlignment = Alignment.Center
        ) {
            LazyColumn(
                modifier = Modifier.fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
                items(3) {
                    println("Recomposition")
                    Loader()
                  }
              }
          }
      }
   }
}

@Composable
fun Loader() {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.water_loading))
val progressAsState by animateLottieCompositionAsState(
    composition = composition,
    clipSpec = LottieClipSpec.Progress(0f, 1f),
)

 LottieAnimation(
    composition = composition,
    progress = { progressAsState },
    modifier = Modifier.requiredHeight(350.dp),
    contentScale = ContentScale.FillHeight
   )
}

I just want the animation to be unaffected by any compostion or scrolling.

Answer 1

I found the solution to my problem. You can use Column in a for loop instead of using LazyColumn and use Modifier.verticalScroll(rememberScrollState()).

@Composable
fun Container(context: Context) {
    val items = remember { List(10) { "Item $it" } }
    
    Box(
        modifier = Modifier
            .background(color = Color.White)
            .fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Box(
                modifier = Modifier
                    .size(200.dp, 500.dp)
                    .clip(shape = RoundedCornerShape(size = 12.dp))
                    .background(color = Color(0xFF82D8FF)),
                contentAlignment = Alignment.Center
            ) {
                Column(
                    Modifier.verticalScroll(rememberScrollState()),
                    verticalArrangement = Arrangement.Center
                ) {
                    items.forEach{ item ->
                        Loader()
                    }
                }
            }
        }
    }