Set ripple effect when thumb icon clicked, add delay 150ms when clicked so that background color changed after some delay

app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/HomeScreen.kt

@@ -8,11 +8,15 @@ import android.os.Handler
 import android.util.Log
 import android.widget.Toast
 import androidx.activity.ComponentActivity
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateSizeAsState
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
@@ -34,6 +38,7 @@ import androidx.compose.foundation.text.ClickableText
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ThumbDown
 import androidx.compose.material.icons.outlined.ThumbUp
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -45,6 +50,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
@@ -107,6 +113,7 @@ import com.vpn.fastestvpnservice.viewmodels.ServerListViewModel
 import com.vpn.fastestvpnservice.widgets.SimpleAppWidget
 import com.wireguard.android.backend.GoBackend
 import de.blinkt.openvpn.core.App
+import kotlinx.coroutines.delay
 import java.util.Locale
 
 lateinit var act: ComponentActivity
@@ -765,8 +772,10 @@ fun Home(
                 }
                 else {
                     var isFeedbackClicked by remember { mutableStateOf(prefHelper.getFeedbackState()) }
+                    var isDelayedFeedbackClicked by remember { mutableStateOf(isFeedbackClicked) }
                     var isThumbUpClicked by remember { mutableStateOf(App.isThumbUpClicked) }
                     var isThumbDownClicked by remember { mutableStateOf(App.isThumbDownClicked) }
+                    var isRipple = false
 
                     Box(
                         modifier = Modifier
@@ -907,14 +916,25 @@ fun Home(
                         }
                     }
 
+                    LaunchedEffect(key1 = isFeedbackClicked) {
+                        if (isFeedbackClicked) {
+                            delay(150)
+                            isDelayedFeedbackClicked = true
+                        }
+                    }
+
+                    val backgroundColor by animateColorAsState(
+                        targetValue = if (isDelayedFeedbackClicked) colorResource(id = R.color.yellow_feedback)
+                        else colorResource(id = R.color.blue_feedback), label = "Color"
+                    )
+
                     Box(
                         modifier = Modifier
                             .padding(16.dp)
                             .fillMaxWidth()
                             .height(70.dp)
                             .background(
-                                if (isFeedbackClicked) colorResource(id = R.color.yellow_feedback)
-                                else colorResource(id = R.color.blue_feedback),
+                                backgroundColor,
                                 shape = RoundedCornerShape(12.dp)
                             )
                             .border(
@@ -949,43 +969,55 @@ fun Home(
                                     modifier = Modifier
                                         .padding(end = 25.dp)
                                         .size(24.dp)
-                                        .pointerInput(Unit) {
-                                            detectTapGestures {
-                                                if (!isFeedbackClicked) {
-                                                    isFeedbackClicked = true
-                                                    prefHelper.setFeedbackState(true)
-                                                    isThumbUpClicked = true
-                                                    App.isThumbUpClicked = true
-                                                }
-                                            }
-                                        },
-                                    colorFilter = ColorFilter.tint(
-                                        if (isFeedbackClicked && isThumbUpClicked) colorResource(id = R.color.switch_green)
-                                        else colorResource(id = R.color.white)
-                                    )
-                                )
-                                Image(
-                                    imageVector = Icons.Outlined.ThumbDown,
-                                    contentDescription = "Thumb Down",
-                                    modifier = Modifier
-                                        .padding(end = 10.dp)
-                                        .size(24.dp)
-                                        .pointerInput(Unit) {
-                                            detectTapGestures {
-                                                if (!isFeedbackClicked) {
-                                                    isFeedbackClicked = true
-                                                    prefHelper.setFeedbackState(true)
-                                                    isThumbDownClicked = true
-                                                    App.isThumbDownClicked = true
-                                                }
+                                        .clickable(
+                                            indication = rememberRipple(
+                                                bounded = true,
+                                                color = colorResource(id = R.color.switch_green)
+                                            ),
+                                            interactionSource = remember { MutableInteractionSource() }
+                                        ) {
+                                            if (!isFeedbackClicked) {
+                                                isFeedbackClicked = true
+                                                prefHelper.setFeedbackState(true)
+                                                isThumbUpClicked = true
+                                                App.isThumbUpClicked = true
+                                                isRipple = true
                                             }
-                                        },
-                                    colorFilter = ColorFilter.tint(
-                                        if (isFeedbackClicked && isThumbDownClicked) colorResource(id = R.color.red)
-                                        else colorResource(id = R.color.white)
-                                    )
-                                )
-                            }
+                                        }
+                                            ,
+                                            colorFilter = ColorFilter.tint(
+                                                if (isFeedbackClicked && isThumbUpClicked) colorResource(id = R.color.switch_green)
+                                                else colorResource(id = R.color.white)
+                                            )
+                                            )
+                                            Image(
+                                                imageVector = Icons.Outlined.ThumbDown,
+                                                contentDescription = "Thumb Down",
+                                                modifier = Modifier
+                                                    .padding(end = 10.dp)
+                                                    .size(24.dp)
+                                                    .clickable(
+                                                        indication = rememberRipple(
+                                                            bounded = true,
+                                                            color = colorResource(id = R.color.Red)
+                                                        ),
+                                                        interactionSource = remember { MutableInteractionSource() }
+                                                    ) {
+                                                        if (!isFeedbackClicked) {
+                                                            isFeedbackClicked = true
+                                                            prefHelper.setFeedbackState(true)
+                                                            isThumbDownClicked = true
+                                                            App.isThumbDownClicked = true
+                                                        }
+                                                    },
+                                                colorFilter = ColorFilter.tint(
+                                                    if (isFeedbackClicked && isThumbDownClicked) colorResource(
+                                                        id = R.color.Red
+                                                    )
+                                                    else colorResource(id = R.color.white)
+                                                )
+                                            )
+                                        }
                         }
                     }
                 }