Prefer using graphicsLayer for better performance issue (limit number of recompositions)

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/ReplySwipeIndicator.kt

@@ -20,11 +20,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.VectorIcons
@@ -40,14 +39,16 @@ import io.element.android.libraries.designsystem.theme.components.Icon
  */
 @Composable
 fun RowScope.ReplySwipeIndicator(
-    swipeProgress: Float,
+    swipeProgress: () -> Float,
     modifier: Modifier = Modifier,
 ) {
     Icon(
         modifier = modifier
             .align(Alignment.CenterVertically)
-            .padding(start = 36.dp * swipeProgress.coerceAtMost(1f))
+            .graphicsLayer {
-            .alpha(swipeProgress),
+                translationX = 36.dp.toPx() * swipeProgress().coerceAtMost(1f)
+                alpha = swipeProgress()
+            },
         contentDescription = null,
         resourceId = VectorIcons.Reply,
     )
@@ -67,10 +68,10 @@ internal fun ReplySwipeIndicatorDarkPreview() =
 private fun ContentToPreview() {
     Column(modifier = Modifier.fillMaxWidth()) {
         for (i in 0..8) {
-            Row { ReplySwipeIndicator(swipeProgress = i / 8f) }
+            Row { ReplySwipeIndicator(swipeProgress = { i / 8f }) }
         }
-        Row { ReplySwipeIndicator(swipeProgress = 1.5f) }
+        Row { ReplySwipeIndicator(swipeProgress = { 1.5f }) }
-        Row { ReplySwipeIndicator(swipeProgress = 2f) }
+        Row { ReplySwipeIndicator(swipeProgress = { 2f }) }
-        Row { ReplySwipeIndicator(swipeProgress = 3f) }
+        Row { ReplySwipeIndicator(swipeProgress = { 3f }) }
     }
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemEventRow.kt

@@ -131,7 +131,7 @@ fun TimelineItemEventRow(
         SwipeToDismiss(
             state = dismissState,
             background = {
-                ReplySwipeIndicator(dismissState.toSwipeProgress())
+                ReplySwipeIndicator({ dismissState.toSwipeProgress() })
             },
             directions = setOf(DismissDirection.StartToEnd),
             dismissContent = {