Performance issues when reading LazyCardStackState.offset

[lnbs97]

I'm trying to display a swipe indicator once the swipe reaches a threshold. This code works, but it makes the swiping really unresponsive. Is there a better way to achieve this?

    val cardStackState = rememberLazyCardStackState()
    val showSwipeIndicator by remember {
        derivedStateOf {
            cardStackState.offset.x > 200
        }
    }

[akardas16]

I have same issue. I am also looking a way to make it smooth.

[akardas16]

I'm trying to display a swipe indicator once the swipe reaches a threshold. This code works, but it makes the swiping really unresponsive. Is there a better way to achieve this?

    val cardStackState = rememberLazyCardStackState()
    val showSwipeIndicator by remember {
        derivedStateOf {
            cardStackState.offset.x > 200
        }
    }

I have found that the issue is not related to the library, it is related to jetpack compose. If you use Androidview, no performanse issue will occur. See below screens

with Compose Like and Nope images

Untitled.video.-.Made.with.Clipchamp.mp4

with androidview Like and Nope images

Screen_Recording_20240421_163154_Amore.AI.mp4

[lnbs97]

Good job! Have you tried using the compose solution in a release build? That might also work, because compose is really slow in debug builds, especially with LazyLists/Grids.

[akardas16]

Good job! Have you tried using the compose solution in a release build? That might also work, because compose is really slow in debug builds, especially with LazyLists/Grids.

yes I have checked release build. it is also slow. Unfortunately compose is really bad at performance. below is my androidview

@Composable
fun ImageWithAnimation(modifier: Modifier = Modifier,image:Int = R.drawable.likepng, rotationImage:Float = 0f){

    // widget.Button
    AndroidView(factory = { ctx ->

        ImageView(ctx).apply {
            scaleType = ImageView.ScaleType.CENTER_CROP
            layoutParams = LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
            rotation = rotationImage
            setImageDrawable(ResourcesCompat.getDrawable(ctx.resources,image,null))
            animateImage(this)
        }

    }, modifier = modifier)
}

private fun animateImage(imageView: ImageView) {
    imageView.animate()
        .scaleX(0.75f).scaleY(0.75f) //scale to quarter(half x,half y)
        .setDuration(400) // all take 1 seconds
        .withEndAction {
            imageView.animate()
                .scaleX(1.2f).scaleY(1.2f) //scale to quarter(half x,half y)
                .setDuration(400) // all take 1 seconds
                .withEndAction {
                    animateImage(imageView)
                }.start()
        }.start()
}