Animated Placeholder with Jetpack Compose

AnimatedPlaceholder.kt

@Composable
fun AnimatedPlaceholder(
    hints: List<String>,
    textStyle: FontFamily = LocalSlimeFont.current.medium,
    textColor: Color = MaterialTheme.colorScheme.onSurfaceVariant,
) {
    val iterator = hints.listIterator()

    val target by produceState(initialValue = hints.first()) {
        iterator.doWhenHasNextOrPrevious {
            value = it
        }
    }

    AnimatedContent(
        targetState = target,
        transitionSpec = { ScrollAnimation() }
    ) { str ->
        Text(
            text = str,
            fontFamily = textStyle,
            color = textColor,
            fontSize = 14.withScale(),
        )
    }
}

ListUtil.kt

suspend fun <T> ListIterator<T>.doWhenHasNextOrPrevious(
    delayMills: Long = 3000,
    doWork: suspend (T) -> Unit
) {
    while (hasNext() || hasPrevious()) {
        while (hasNext()) {
            delay(delayMills)
            doWork(next())
        }
        while (hasPrevious()) {
            delay(delayMills)
            doWork(previous())
        }
    }
}

ScrollAnimation.kt

object ScrollAnimation {
    operator fun invoke(): ContentTransform {
        return slideInVertically(
            initialOffsetY = { 50 },
            animationSpec = tween()
        ) + fadeIn() with slideOutVertically(
            targetOffsetY = { -50 },
            animationSpec = tween()
        ) + fadeOut()
    }
}

SearchBar.kt

@Composable
fun SearchBar(
    modifier: Modifier = Modifier,
    query: String,
    onQueryChange: (String) -> Unit,
) {
    SlimeTextField(
        modifier = modifier,
        input = query,
        onTextChange = onQueryChange,
        placeholderContent = {
            AnimatedPlaceholder(
                hints = listOf(
                    stringResource(id = R.string.article_search_txt_1),
                    stringResource(id = R.string.article_search_txt_2),
                    "Search your favourite topic",
                ),
            )
        },
    )
}