I have issue here that I have built a custom anima...

# multiplatform

[John Safwat]

I have issue here that I have built a custom animation package create a pre built animations that ready to use and I have issue in the app where I use this inside a lazy column and row whenever I scroll up and down and right and left I rebuilt the animation so iam searching for any way to make lazy column don't rebuild this item again

here is the Animation Code :

@Composable
fun KScaleAnimation(
    key: Any? = null,
    duration: Int = 500,
    delay: Int = 0,
    content: (@Composable () -> Unit),
) {
    val scale = remember { Animatable(0f) }
    LaunchedEffect(key) {
        scale.animateTo(
            targetValue = 1f,
            animationSpec = tween(durationMillis = duration, delayMillis = delay),
        )
    }

    Box(
        modifier = Modifier.scale(scale.value),
    ) {
        content.invoke()
    }
}

and here is how i use it inside a factory

@Composable
fun HomeTabView(navController: NavController) {
    val viewModel: HomeTabViewModel = koinViewModel()
    val state = viewModel.uiState.collectAsState()
    val toastState = ToastState()

    BaseComposable(
        navController = navController,
        toastState = toastState,
    ) {
        Scaffold {
            LazyColumn(
                verticalArrangement = Arrangement.spacedBy(24.dp),
                contentPadding =
                    PaddingValues(
                        vertical = 16.dp,
                    ),
            ) {
                items(state.value.homeData) { homeData ->
                    println(homeData)
                    when (homeData.data) {
                        is HomeScreenSections.BannersSection -> BannersHomeFactoryImpl().CreateHomeSectionUI(homeData as Resource<HomeScreenSections.BannersSection>) { viewModel.doAction(it) }
                        is HomeScreenSections.BrandsSection -> BrandsHomeFactoryImpl().CreateHomeSectionUI(homeData as Resource<HomeScreenSections.BrandsSection>) { viewModel.doAction(it) }
                        is HomeScreenSections.CategoriesSection -> CategoriesHomeFactoryImpl().CreateHomeSectionUI(homeData as Resource<HomeScreenSections.CategoriesSection>) { viewModel.doAction(it) }
                        is HomeScreenSections.KPayCategoriesSection -> KPayCategoriesHomeFactoryImpl().CreateHomeSectionUI(homeData as Resource<HomeScreenSections.KPayCategoriesSection>) { viewModel.doAction(it) }
                        is HomeScreenSections.LeafletsSection -> LeafletsHomeFactoryImpl().CreateHomeSectionUI(homeData as Resource<HomeScreenSections.LeafletsSection>) { viewModel.doAction(it) }
                        is HomeScreenSections.OffersSection -> OffersHomeFactoryImpl().CreateHomeSectionUI(homeData as Resource<HomeScreenSections.OffersSection>) { viewModel.doAction(it) }
                        is HomeScreenSections.ProductsSection -> ProductsCarouselHomeFactoryImpl(toastState).CreateHomeSectionUI(homeData as Resource<HomeScreenSections.ProductsSection>) { viewModel.doAction(it) }
                        is HomeScreenSections.UserSection -> UserCardHomeFactoryImpl().CreateHomeSectionUI(homeData as Resource<HomeScreenSections.UserSection>) { viewModel.doAction(it) }
                        null -> {}
                    }
                }
            }
        }
    }
}

and here is a sample of one of home sections

@Composable
override fun HomeSectionSuccess(
    data: Resource<HomeScreenSections.BrandsSection>,
    doIntent: (HomeTabEvents) -> Unit,
) {
    val brands = data.data?.brands ?: emptyList()
    if (brands.isEmpty()) return

    val state = rememberLazyListState()

    Column {
        Text(text = stringResource(Res.string.shop_by_brand), style = KazyonTypography().labelSmall, modifier = Modifier.padding(horizontal = 16.dp))
        8.VerticalSpacing()
        LazyRow(
            contentPadding = PaddingValues(horizontal = 16.dp),
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            state = state,
        ) {
            items(brands) { brand ->

                KScaleAnimation {
                    KazyonNetworkImage(
                        imageUrl = brand.image ?: "",
                        contentScale = ContentScale.Crop,
                        modifier =
                            Modifier
                                .width(80.dp)
                                .aspectRatio(1f)
                                .clip(
                                    RoundedCornerShape(100.dp),
                                ).border(
                                    width = 1.dp,
                                    color = ORANGE,
                                    shape = RoundedCornerShape(100.dp),
                                ),
                    )
                }
            }
        }
    }
}