animateItem() in LazyList shadow clip / flickering problem

I'm currently experiencing an issue with cards in my lazy list in the app I'm developing:
when the lazy list reloads the items (because I trigger some MutableStateFlow change and so the items in my list change), I have some weird flickering / clipping effect on the shadow of the cards (defined via elevation property on ElevatedCard in TaskCard.kt).

This is definitely related to the animateItem() in the Box's modifier, instruction
Box(modifier = Modifier.animateItem()) inside MainScreen.kt , since if I remove it, no flickering. The problem is that I need the animateItem for the removal animation of the card from the list after swipe to delete (you can see it in my other question)

At the same time, animateItem gives me the weird flickering artifact when the card list reloads, see attached gif:

Is there a solution to this?

code from my app:

MainScreen.kt

@Composable fun MainScreen( tasksInWeek: TasksInPeriod, selectedWeek: DateInterval, selectedDate: LocalDate, onDateEvent: (DateEvent) -> Unit, onTaskEvent: (TaskEvent) -> Unit, navigateTo: (route: Destinations) -> Unit, ) { val locale = ConfigurationCompat.getLocales(LocalConfiguration.current).get(0) val dates = selectedWeek.getDatesBetween() Scaffold( content = { paddingValues -> Column( modifier = Modifier.padding( start = Constants.screenPadding, end = Constants.screenPadding, top = paddingValues.calculateTopPadding() + 10.dp, bottom = paddingValues.calculateBottomPadding() ) ) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(9.dp), modifier = Modifier.weight(1f) ) { Text( text = SimpleDateFormat("MMM", locale) .format( Date.from( selectedDate.atStartOfDay(ZoneId.systemDefault()).toInstant() ) ) .toString().uppercase(Locale.getDefault()), fontWeight = FontWeight.SemiBold, fontSize = 12.sp, style = TextStyle( platformStyle = PlatformTextStyle( includeFontPadding = false ) ), modifier = Modifier.rotate(-90f) ) for (date in dates) CircularDayProgressBar( 0f, day = date, isSelectedDay = date == selectedDate, isCurrentDay = date == LocalDate.now(), strokeColor = MaterialTheme.colorScheme.primary, backgroundColor = MaterialTheme.colorScheme.surface, textColor = MaterialTheme.colorScheme.outline, onClick = { onDateEvent(DateEvent.ChangeSelectedDate(date)) } ) } Spacer(modifier = Modifier.weight(0.1f)) Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier.weight(1f) ) { Text( text = "1/10", fontWeight = FontWeight.SemiBold, fontSize = 16.sp, ) Text( text = stringResource(R.string.done_tasks), fontWeight = FontWeight.Medium, fontSize = 16.sp, ) Spacer(modifier = Modifier.weight(1f)) Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier.width(100.dp) ) { ElevatedButton( onClick = { onDateEvent(DateEvent.ChangeToPrevWeek) }, modifier = Modifier.size(width = 40.dp, height = 30.dp), contentPadding = PaddingValues(0.dp), shape = RoundedCornerShape(8.dp), elevation = ButtonDefaults.buttonElevation(defaultElevation = 2.dp) ) { Icon(Icons.Filled.ChevronLeft, contentDescription = null) } Spacer(modifier = Modifier.weight(1f)) ElevatedButton( onClick = { onDateEvent(DateEvent.ChangeToNextWeek) }, modifier = Modifier.size(width = 40.dp, height = 30.dp), contentPadding = PaddingValues(0.dp), shape = RoundedCornerShape(8.dp), elevation = ButtonDefaults.buttonElevation(defaultElevation = 2.dp) ) { Icon(Icons.Filled.ChevronRight, contentDescription = null) } } } Spacer(modifier = Modifier.weight(0.2f)) Box( modifier = Modifier.weight(10f), contentAlignment = Alignment.Center ) { LazyColumn( contentPadding = PaddingValues(bottom = 10.dp, top = 10.dp), verticalArrangement = Arrangement.spacedBy(32.dp), modifier = Modifier.fillMaxSize() ) { items( items = tasksInWeek.getForDate(selectedDate), key = { it.taskId.toString() + it.date.toString() } ) { task -> Box(modifier = Modifier.animateItem()) { SwipeToDeleteContainer( item = task, onDelete = { onTaskEvent(TaskEvent.DeleteTask(task)) } ) { TaskCard( taskCardDto = task, onCheckedChange = { id, done -> onTaskEvent( TaskEvent.SetDone( id, done, selectedDate ) ) } ) } } } } } } }, bottomBar = { BottomAppBar( modifier = Modifier.graphicsLayer { shadowElevation = 80f }, containerColor = MaterialTheme.colorScheme.background, contentColor = MaterialTheme.colorScheme.outline, actions = { IconButton(onClick = { /* do something */ }) { Icon( Icons.Outlined.Settings, contentDescription = "description" ) } IconButton(onClick = { /* do something */ }) { Icon( Icons.Outlined.Search, contentDescription = "description", ) } }, floatingActionButton = { FloatingActionButton( onClick = { navigateTo(Destinations.CreateTask) }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.background, elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation() ) { Icon(Icons.Filled.Add, "description") } } ) } ) }

TaskCard.kt

@Composable fun TaskCard( taskCardDto: TaskCardDto, onCheckedChange: (Long, Boolean) -> Unit ) { ElevatedCard( elevation = CardDefaults.cardElevation( defaultElevation = 6.dp ), modifier = Modifier .height(70.dp) .fillMaxWidth(), shape = Constants.cardShape ) { Row( modifier = Modifier .padding(vertical = 12.dp, horizontal = 20.dp) .fillMaxWidth() .fillMaxHeight(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { Image( painter = painterResource(id = R.drawable.postit), contentDescription = "default task icon", modifier = Modifier.weight(0.7f) ) Text( text = taskCardDto.title, fontWeight = FontWeight.Medium, style = if (taskCardDto.done) { LocalTextStyle.current.copy(textDecoration = TextDecoration.LineThrough) } else LocalTextStyle.current.copy(), modifier = Modifier .weight(4f) .padding(horizontal = 20.dp) ) RoundedCornerCheckbox( isChecked = taskCardDto.done, onValueChange = { isChecked -> onCheckedChange(taskCardDto.taskId, isChecked) }, checkedColor = MaterialTheme.colorScheme.primary, uncheckedColor = Color.White ) } } }

SwipeToDeleteContainer.kt

@Composable fun <T> SwipeToDeleteContainer( item: T, onDelete: (T) -> Unit, content: @Composable (T) -> Unit ) { val state = rememberSwipeToDismissBoxState( initialValue = SwipeToDismissBoxValue.Settled, positionalThreshold = { distance -> distance * 0.5f }) LaunchedEffect(state.currentValue) { if (state.currentValue == SwipeToDismissBoxValue.EndToStart) { onDelete(item) } } SwipeToDismissBox( state = state, backgroundContent = { DeleteBackground(swipeDismissState = state) }, content = { content(item) }, enableDismissFromEndToStart = true, enableDismissFromStartToEnd = false ) } @Composable private fun DeleteBackground( swipeDismissState: SwipeToDismissBoxState ) { val color = if (swipeDismissState.dismissDirection == SwipeToDismissBoxValue.EndToStart) { Color.Red } else Color.Transparent Box( modifier = Modifier .clip(Constants.cardShape) .background(color) .padding(16.dp) .fillMaxSize(), contentAlignment = Alignment.CenterEnd ) { Icon( imageVector = Icons.Default.Delete, contentDescription = null, tint = Color.White ) } }