improve fast reply indicator ui

Author: andr0d1v

presentation/src/main/java/org/monogram/presentation/features/chats/currentChat/components/FastReplyIndicator.kt

@@ -1,24 +1,26 @@
 package org.monogram.presentation.features.chats.currentChat.components
 
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.AnimationVector1D
 import androidx.compose.animation.core.Spring
-import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.spring
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.background
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
 import androidx.compose.foundation.gestures.awaitEachGesture
 import androidx.compose.foundation.gestures.awaitFirstDown
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.Reply
+import androidx.compose.material3.CircularWavyProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.graphicsLayer
@@ -36,6 +38,7 @@ const val REPLY_TRIGGER_FRACTION = 0.35f
 const val MAX_SWIPE_FRACTION = 0.7f
 const val ICON_OFFSET_FRACTION = 0.1f
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun FastReplyIndicator(
     modifier: Modifier = Modifier,
@@ -46,46 +49,44 @@ fun FastReplyIndicator(
 ) {
     val triggerDistance = maxWidth.value * REPLY_TRIGGER_FRACTION
     val dragged = (-dragOffsetX.value).coerceAtLeast(0f)
-    val progress = ((dragged - 48.dp.value) / (triggerDistance - 48.dp.value))
-        .coerceIn(0f, 1f)
 
-    val iconAlpha by animateFloatAsState(
-        targetValue = progress,
-        animationSpec = tween(durationMillis = 150)
-    )
-    val iconScale by animateFloatAsState(
-        targetValue = lerp(0.5f, 1f, progress),
-        animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow)
-    )
+    val progress = ((dragged - 48.dp.value) / (triggerDistance - 48.dp.value)).coerceIn(0f, 1f)
+
     val iconOffset = maxWidth * ICON_OFFSET_FRACTION
 
-    if (dragged > 48.dp.value) {
-        Box(
-            modifier = modifier
-                .offset(x = if (isOutgoing) iconOffset else maxWidth)
-                .size(30.dp)
-                .graphicsLayer {
-                    translationX = when {
-                        isOutgoing -> (-dragOffsetX.value - iconOffset.value) * 0.5f
-                        inverseOffset -> -iconOffset.value
-                        else -> iconOffset.value
-                    }
-                    scaleX = iconScale
-                    scaleY = iconScale
-                    alpha = iconAlpha
+    Box(
+        modifier = modifier
+            .offset(x = if (isOutgoing) iconOffset else maxWidth)
+            .size(34.dp)
+            .graphicsLayer {
+                translationX = when {
+                    isOutgoing -> (-dragOffsetX.value - iconOffset.value) * 0.5f
+                    inverseOffset -> -iconOffset.value
+                    else -> iconOffset.value
                 }
-                .background(
-                    color = MaterialTheme.colorScheme.surfaceContainerHigh.copy(alpha = 0.7f),
-                    shape = CircleShape
-                ),
-            contentAlignment = Alignment.Center
+            },
+        contentAlignment = Alignment.Center
+    ) {
+        AnimatedVisibility(
+            visible = dragged > 48.dp.value,
+            enter = fadeIn() + scaleIn(initialScale = 0.6f),
+            exit = fadeOut() + scaleOut(targetScale = 0.6f)
         ) {
-            Icon(
-                imageVector = Icons.AutoMirrored.Filled.Reply,
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.onSurfaceVariant,
-                modifier = Modifier.size(18.dp)
-            )
+            Box(
+                modifier = Modifier.matchParentSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularWavyProgressIndicator(
+                    progress = { progress },
+                    color = MaterialTheme.colorScheme.primary,
+                )
+                Icon(
+                    imageVector = Icons.AutoMirrored.Filled.Reply,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.primary,
+                    modifier = Modifier.size(18.dp)
+                )
+            }
         }
     }
 }
@@ -135,7 +136,13 @@ fun Modifier.fastReplyPointer(
                 onReplySwipe()
             }
             scope.launch {
-                dragOffsetX.animateTo(0f, spring())
+                dragOffsetX.animateTo(
+                    0f,
+                    spring(
+                        dampingRatio = Spring.DampingRatioMediumBouncy,
+                        stiffness = Spring.StiffnessLow
+                    )
+                )
             }
         }
     }