title: SwipeToDismiss inside LazyColumn with animation
body: <p>I am trying to achieve something like <a href="https://intensecoder.com/android-swipe-to-delete-in-recyclerview-with-diffutil/" rel="nofollow noreferrer">this</a> but with Jetpack Compose. In other words swipe to delete like we could do in <code>RecyclerView</code> with <code>ItemTouchHelper</code> and <code>class DiffCallBack : DiffUtil.ItemCallback&lt;RvModel&gt;()</code> where we could see <code>enter - exit animations</code> and then the list moving gracefully up or down where the item has been inserted or removed.</p>
  <p>This is what I have tried:</p>
  <pre><code>LazyColumn(state = listState) {
      items(products, {listItem:InventoryEntity -&gt; listItem.inventoryId}) { item -&gt;
          var unread by remember { mutableStateOf(false) }
          val dismissState = rememberDismissState(
              confirmStateChange = {
                  if (it == DismissValue.DismissedToEnd) unread = !unread
                  it != DismissValue.DismissedToEnd
              }
          )
          val isDismissed = dismissState.isDismissed(DismissDirection.EndToStart)
  
          if (dismissState.isDismissed(DismissDirection.EndToStart)){
              LaunchedEffect(Unit) {
                  delay(300)
                  viewModel.deleteProduct(item.inventoryId)
              }
  
          }
  
          var itemAppeared by remember { mutableStateOf(!columnAppeared) }
          LaunchedEffect(Unit) {
              itemAppeared = true
          }
  
          AnimatedVisibility(
              visible = itemAppeared &amp;&amp; !isDismissed,
              exit = shrinkVertically(
                  animationSpec = tween(
                      durationMillis = 300,
                  )
              ),
              enter = expandVertically(
                  animationSpec = tween(
                      durationMillis = 300
                  )
              )
          ) {
              SwipeToDismiss(
                  state = dismissState,
                  modifier = Modifier.padding(vertical = 4.dp),
                  directions = setOf(
                      DismissDirection.StartToEnd,
                      DismissDirection.EndToStart
                  ),
                  dismissThresholds = { direction -&gt;
                      FractionalThreshold(if (direction == DismissDirection.StartToEnd) 0.25f else 0.5f)
                  },
                  background = {
                      val direction =
                          dismissState.dismissDirection ?: return@SwipeToDismiss
                      val color by animateColorAsState(
                          when (dismissState.targetValue) {
                              DismissValue.Default -&gt; Color.LightGray
                              DismissValue.DismissedToEnd -&gt; Color.Green
                              DismissValue.DismissedToStart -&gt; Color.Red
                          }
                      )
                      val alignment = when (direction) {
                          DismissDirection.StartToEnd -&gt; Alignment.CenterStart
                          DismissDirection.EndToStart -&gt; Alignment.CenterEnd
                      }
                      val icon = when (direction) {
                          DismissDirection.StartToEnd -&gt; Icons.Default.Done
                          DismissDirection.EndToStart -&gt; Icons.Default.Delete
                      }
                      val scale by animateFloatAsState(
                          if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f
                      )
  
                      Box(
                          Modifier
                              .fillMaxSize()
                              .background(color)
                              .padding(horizontal = 20.dp),
                          contentAlignment = alignment
                      ) {
                          Icon(
                              icon,
                              contentDescription = &quot;Localized description&quot;,
                              modifier = Modifier.scale(scale)
                          )
                      }
                  },
                  dismissContent = {
                      Card(
                          elevation = animateDpAsState(
                              if (dismissState.dismissDirection != null) 4.dp else 0.dp
                          ).value
                      ) {
                          ProductRow(product = item, number = item.inventoryId)
                      }
                  }
              )
          }
      }
  }
  </code></pre>
  <p>Even though it works. Scrolling is not smooth, and when I scroll up it jumps to the top. What is the right way to implement this function?</p>