AsyncImage in LazyColumn Kotlin Compose

Question

I have a list of photos from the internet and I want to load them into a LazyColumn. The problem is that some of them are loading faster than others so the photos appear in random order. Here is the code:

val state = viewModel.photos.collectAsState()
val lastIndex = state.value.lastIndex
LazyColumn {
    itemsIndexed(state.value) { i, photo ->
    
        AsyncImage(
            model = photo.urls.regular,
            contentDescription = null,
            modifier = Modifier.fillMaxWidth(),
        )

        if (i >= lastIndex-1 && !viewModel.isLoading.value) {
            viewModel.getPhotos(6)
        }
    }
}

Sometimes image with LastIndex-1 occurs first and it triggers viewModel to get new data. How can I make a handler for loading a list of images? Or maybe any suggestions on how to make a preloading screen which will end after loading all images into LazyColumn I also have a Coil version too:

val model = ImageRequest.Builder(LocalContext.current)
            .data(photo.urls.regular)
            .size(Size.ORIGINAL)
            .crossfade(true)
            .build()

        val painter = rememberAsyncImagePainter(model)

        Image(
            painter = painter,
            contentDescription = null,
            modifier = Modifier.fillMaxWidth(),
        )