now i`m facing a problem in prepend item at the front of the lazyColumn.

when i tried to add items at the front of the list, what i can see is the newest item at the first position, but the previous items was moved to the bottom, like the gif shows below:

sample

here below are my sample code using paging3: fetching data from database:

package com.chat.compose.app

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.unit.dp
import androidx.paging.LoadState
import androidx.paging.compose.collectAsLazyPagingItems
import androidx.paging.compose.itemContentType
import androidx.paging.compose.itemKey

class MainActivity : ComponentActivity() {

    private val viewModel by viewModels<MessageListViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val lazyListState = rememberLazyListState()

            // data list comes from paging 3
            val lazyPagingItems = [email protected]()
            MaterialTheme {
                Column {
                    LazyColumn(
                        state = lazyListState,
                        modifier = Modifier.fillMaxWidth()
                            .weight(1f),
                        reverseLayout = false,
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                    ) {
                        if (lazyPagingItems.loadState.prepend is LoadState.Loading) {
                            item(
                                key = "item_prepend",
                                contentType = "item_prepend_type"
                            ) {
                                LoadingIndicator(
                                    modifier = Modifier.fillParentMaxWidth()
                                        .padding(all = 16.dp)
                                )
                            }
                        }
                        items(
                            count = lazyPagingItems.itemCount,
                            key = lazyPagingItems.itemKey { it.uuid },
                            contentType = lazyPagingItems.itemContentType { it.sessionType.name }
                        ) { index ->
                            when (val item = lazyPagingItems[index]) {
                                is UiTextMessage -> {
                                    Row(
                                        modifier = Modifier
                                            .fillParentMaxWidth()
                                            .clickable {
                                                [email protected](item.uuid, item.sessionType)
                                            }
                                            .padding(16.dp),
                                        verticalAlignment = Alignment.CenterVertically
                                    ) {
                                        Text(
                                            modifier = Modifier.weight(1f),
                                            text = item.textContent
                                        )
                                    }
                                }

                                else -> {
                                    Text(
                                        text = "Placeholder",
                                        modifier = Modifier.padding(vertical = 16.dp).fillParentMaxWidth()
                                    )
                                }
                            }
                        }

                        if (lazyPagingItems.loadState.append is LoadState.Loading) {
                            item(
                                key = "item_append",
                                contentType = "item_append_type"
                            ) {
                                LoadingIndicator(
                                    modifier = Modifier.fillParentMaxWidth()
                                        .padding(all = 16.dp)
                                )
                            }
                        }
                    }
                    Row {
                        TextButton(
                            onClick = {
                                [email protected](messages)
                            },
                        ) {
                            Text(text = "add")
                        }
                        TextButton(
                            onClick = {

                            },
                        ) {
                            Text(text = "delete")
                        }
                    }
                }
            }
        }
    }
}

@Composable
private fun LoadingIndicator(modifier: Modifier) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        CircularProgressIndicator(
            strokeCap = StrokeCap.Round,
            strokeWidth = 3.dp,
            modifier = Modifier.size(24.dp)
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(text = "Loading")
    }
}

i`ve searched the google, but no solutions were found for my situation, and somehow i can find the difference is that i have a prepend/append state showed below and above the list, and i believe this is the root cause of my problem.

but i don`t find a better situation to fix this, is any body has a good idea?