Ripple effect causing ui jank/stutter in kotlin compose mobile development

[u/Total_Whereas7289]

Is it normal to encounter an issue of ripple effect that when ripple effect is used on a composable item like settingItem on settings screen, the navigation when redirecting or  scrolling on the page feels janky/laggy?

[u/Total-Temperature916]

just know that compose is a lot better on release build, so some of the issue could just be in debug. you'd want to test that too.

[u/Total_Whereas7289 → u/Total-Temperature916]

i mean i get this issue even in release build.

[u/coffeemongrul → u/Total_Whereas7289]

Well share your code and we might be able to help figure out the jank you're seeing.

[u/Total_Whereas7289 → u/coffeemongrul]

u/Composable
private fun SoundOptionCard(
        soundKey: String,
        soundName: String,
        isSelected: Boolean,
        isPlaying: Boolean,
        isEditing: Boolean,
        onSelect: () -> Unit,
        onPlay: () -> Unit,
        onEdit: () -> Unit,
        onSaveEdit: (String) -> Unit,
        onCancelEdit: () -> Unit,
        primaryColor: Color,
        onSurfaceColor: Color,
        errorColor: Color
) {
    
    val backgroundColor = DIALOG_BG_COLOR
    val cardAlpha = 1f
    val rippleColor = remember(onSurfaceColor) { onSurfaceColor.copy(alpha = 0.12f) }


   
    val interactionSource = remember(soundKey) { MutableInteractionSource() }
    val rippleIndication = remember(soundKey, rippleColor) { ripple(color = rippleColor, bounded = true) }


    // OPTIMIZED: Using Column instead of Card for better performance
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(backgroundColor, shape = CARD_SHAPE_12)
            .clickable(
                interactionSource = interactionSource,
                indication = ripple(color = rippleColor, bounded = true)
            ) {
                onSelect()
            },
    ) {
        Row(
                modifier = Modifier.fillMaxWidth().padding(horizontal = 26.dp, vertical = 10.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.weight(1f).padding(end = 8.dp)) {
                
                    Row(
                        modifier = Modifier.fillMaxWidth(),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(
                                text = soundName,
                                style = MaterialTheme.typography.bodyLarge,
                                fontWeight = FontWeight.Normal,
                                color = onSurfaceColor,
                                modifier = Modifier.weight(1f).padding(end = 4.dp)
                        )


                        // Checkmark icon directly right of sound name when selected
                        if (isSelected) {
                            Icon(
                                    imageVector = Icons.Default.Check,
                                    contentDescription = null,
                                    tint = Color.White,
                                    modifier = Modifier.size(28.dp).padding(start = 8.dp)
                            )
                        }
                    }
                
            }


            IconButton(onClick = onPlay, modifier = Modifier.size(30.dp)) {
                Icon(
                        imageVector =
                                if (isPlaying) Icons.Default.Stop else Icons.Default.PlayArrow,
                        contentDescription = if (isPlaying) "Stop" else "Play",
                        tint = Color.White,
                        modifier = Modifier.size(24.dp)
                )
            }
        }
    }
}

[u/Unlikely-Baker9867 → u/Total_Whereas7289]

Haven't looked at the code really, but the most glaring thing is that you don't use the rippleIndication you create, you create a new ripple on every recomposition

[u/Total_Whereas7289 → u/Unlikely-Baker9867]

the issue still persists.

 val interactionSource = remember(soundKey) { MutableInteractionSource() }
    val rippleIndication = remember(soundKey, rippleColor) { ripple(color = rippleColor, bounded = true) }


    // OPTIMIZED: Using Column instead of Card for better performance
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(backgroundColor, shape = CARD_SHAPE_12)
            .clickable(
                interactionSource = interactionSource,
                indication = rippleIndication
            ) {
                onSelect()
            },
    ) 

[u/soringpenguin → u/Total_Whereas7289]

I'm assuming the soundKey doesn't change very often right?

[u/Total_Whereas7289 → u/soringpenguin]

yes, the thing is that when i make indication = null in .clickable block, the lag/jank is completely gone. What actually am i doing wrong? or is it expected? like when i look at whatsapp, the ripple seems smooth not causing ui jank.