@Composable
private fun PulsatingRipple() {
    ButtonBox {
        val opacityFirstWave = remember { Animatable(0.5f) }
        val sizeFirstWave = remember { Animatable(122f) }

        val opacitySecondWave = remember { Animatable(0.5f) }
        val sizeSecondWave = remember { Animatable(122f) }

        ValueAnimationEffect(value = opacityFirstWave, targetValue = 0f)
        ValueAnimationEffect(value = sizeFirstWave, targetValue = 170f)

        ValueAnimationEffect(
            value = opacitySecondWave,
            targetValue = 0f,
            initialOffset = StartOffset(500)
        )
        ValueAnimationEffect(
            value = sizeSecondWave,
            targetValue = 170f,
            initialOffset = StartOffset(500)
        )

        PrimaryCircle(size = sizeFirstWave.value.dp, alpha = opacityFirstWave.value)
        PrimaryCircle(size = sizeSecondWave.value.dp, alpha = opacitySecondWave.value)
    }
}

@Composable
private fun ValueAnimationEffect(
    value: Animatable<Float, *>,
    targetValue: Float,
    initialOffset: StartOffset = StartOffset(0)
) {
    LaunchedEffect(key1 = true) {
        value.animateTo(
            targetValue = targetValue,
            animationSpec = infiniteRepeatable(
                animation = tween(1000, easing = LinearEasing),
                repeatMode = RepeatMode.Restart,
                initialStartOffset = initialOffset,
            ),
        )
    }
}

@Composable
private fun PrimaryCircle(size: Dp, alpha: Float) {
    val color = MaterialTheme.colorScheme.primary

    Canvas(
        modifier = Modifier
            .size(size)
            .alpha(alpha)
    ) {
        drawCircle(color = color)
    }
}

@Composable
private fun ButtonBox(
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit,
) {
    Box(
        modifier = modifier.size(BUTTON_CONTAINER_SIZE.dp),
        contentAlignment = Alignment.Center,
        content = content,
    )
}