Управляйте видимостью с помощью Compose UI

Question

Я новичок в Compose и пытаюсь управлять видимостью TopBar при прокрутке списка (LazyColumn). Я не претендую на использование Scaffold с Material 3, потому что хочу узнать немного больше о Compose и анимации.

Итак, во-первых, это мой код, и он отлично работает ->

      @Composable
fun FavouriteCompose(stateUi: FavouriteStateUi.ShowMovies) {
    Box(Modifier.fillMaxSize()) {
        val state = rememberLazyListState()
        val firstVisible = remember { derivedStateOf { state.firstVisibleItemIndex } }
        Column(
            Modifier
                .fillMaxSize()
                .background(color = GreenB)
        ) {
            AnimatedVisibility(visible = firstVisible.value == 0) {
                Spacer(modifier = Modifier.height(20.dp))
                Paragraphs.Paragraph(
                    modifier = Modifier.padding(10.dp),
                    stringRes = R.string.favourite,
                    color = Color.White,
                    paragraphSize = Paragraphs.ParagraphSize.PARAGRAPH_24_SP
                )
                Spacer(modifier = Modifier.height(20.dp))
            }
            if (stateUi.movies?.isEmpty() == true) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .padding(top = 10.dp)
                        .fillMaxSize()
                        .clip(RoundedCornerShape(10.dp))
                        .background(Color.White),
                ) {
                    Image(
                        alignment = Alignment.Center,
                        modifier = Modifier.size(200.dp),
                        painter = painterResource(
                            id = R.drawable.ic_baseline_local_movies_24
                        ),
                        contentDescription = ""
                    )
                    Paragraphs.Paragraph(
                        modifier = Modifier
                            .padding(top = 10.dp)
                            .align(Alignment.CenterHorizontally),
                        stringRes = R.string.add_more_movies,
                        paragraphSize = Paragraphs.ParagraphSize.PARAGRAPH_24_SP
                    )
                }
            } else {
                LazyColumn(
                    state = state,
                    modifier = Modifier
                        .fillMaxSize()
                        .clip(RoundedCornerShape(10.dp))
                        .background(Color.White)
                        .padding(10.dp)
                ) {
                    items(
                        items = stateUi.movies.orEmpty(),
                        key = { cardModel -> cardModel.id }
                    ) { item -> MovieCard(item) }
                }
            }
        }
        val snackBarModel = stateUi.snackBarModel
        if (snackBarModel.addOrRemoveMovie == true) {
            Box(
                modifier = Modifier
                    .align(Alignment.BottomEnd)
                    .padding(bottom = 10.dp)
            ) {
                SnackBar(
                    stringRes = R.string.pelicula_removida,
                    icon = R.drawable.ic_baseline_local_movies_24,
                    backgroundColor = Color.Black,
                    textColor = LightGrey,
                    iconColor = Blue,
                    snackBarModel = snackBarModel
                )
            }
        }
    }
}

Каждый раз, когда я прокручиваю список, topApp скрывает и наоборот, но я не уверен, что это лучший способ сделать это (без использования Scaffold с материалом 3).

Я создаю больше рекомпозиций с таким решением? Должен ли я вместо этого сохранять ленивое состояние в модели представления?

Спасибо!.