GridDemo.kt

val clubsList = onboardingViewModel.clubs.collectAsLazyPagingItems()
 
GridPagingList(modifier = Modifier.fillMaxWidth().weight(1f),clubsList) {
                    TeamItem(it, savedClubs.value) { club ->
                        onboardingViewModel.updateClubs(savedClubs.value, club)
                    }
                }

GridPagingList.kt

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyGridScope
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.paging.LoadState
import androidx.paging.compose.LazyPagingItems
import com.facr.fotbal.util.itemsGridIndexed

@ExperimentalFoundationApi
@Composable
fun <T : Any> GridPagingList(
    modifier: Modifier,
    items: LazyPagingItems<T>,
    column: Int = 3,
    searchingList: Boolean = false,
    itemContent: @Composable LazyGridScope.(value: T) -> Unit
) {
    Box(modifier = modifier) {
        when (val refreshState = items.loadState.refresh) {
            is LoadState.Loading -> {
                CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
            }
            is LoadState.Error -> {
                ErrorItem(
                    refreshState.error.localizedMessage!!,
                    modifier = Modifier.fillMaxSize(),
                    onClickRetry = { items.retry() }
                )
            }
            is LoadState.NotLoading -> {
                Column(modifier = Modifier.fillMaxSize()) {
                    if(items.itemCount > 0) {
                        LazyVerticalGrid(
                            modifier = Modifier.fillMaxSize(),
                            cells = GridCells.Fixed(column),
                           // contentPadding = PaddingValues(top = Constants.Padding8dp)
                        ) {

                            itemsGridIndexed(items) { _, item ->
                                item?.let {
                                    itemContent(it)
                                }
                            }
                        }
                    } else {
                        Box(modifier = Modifier.fillMaxSize()) {
                            if(searchingList) {
                                NoSearchResult(modifier = Modifier.fillMaxSize())
                            } else {
                                NoDataFound(modifier = Modifier.fillMaxSize())
                            }
                        }
                    }
                }
            }
        }
        when (val appendState = items.loadState.append) {
            is LoadState.Loading -> {
                CircularProgressIndicator(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentWidth(Alignment.CenterHorizontally)
                        .align(Alignment.BottomCenter)
                )
            }
            is LoadState.Error -> {
                ErrorItem(
                    "appendState.error.localizedMessage!!",
                    modifier = Modifier.align(Alignment.BottomCenter)
                ) {
                    items.retry()
                }
            }
        }
    }
}

TeamItem.kt

@Composable
fun TeamItem(club: Club,
             selectedClubs: List<Club> = emptyList(),
             onItemClicked: (Club) -> Unit) {
    val isSelected = selectedClubs.contains(club)
    val color: Color by animateColorAsState(
        if (isSelected) MaterialTheme.colors.primary else MaterialTheme.colors.onBackground
    )
    val transition = updateTransition(
        targetState = if (isSelected) SelectionState.Selected else SelectionState.Unselected
    )
    val selectedAlpha by transition.animateFloat { state ->
        when (state) {
            SelectionState.Unselected -> 0f
            SelectionState.Selected -> 1f
        }
    }
    val checkScale by transition.animateFloat { state ->
        when (state) {
            SelectionState.Unselected -> 0f
            SelectionState.Selected -> 1f
        }
    }
    Column(horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(Padding8dp)
            .clickable(onClick = {
                club.isSelected.value = !club.isSelected.value
                onItemClicked(club)
            })
    ) {
        Box {
            Image(
                painterResource(id = club.teamLogoDrawable),
                contentScale = ContentScale.Fit,
                modifier = Modifier.preferredSize(80.dp),
                contentDescription = null
            )
            Surface(
                color = MaterialTheme.colors.primary,
                shape = CircleShape,
                elevation = 4.dp,
                modifier = Modifier.size(25.dp)
                    .align(Alignment.CenterEnd)
                    .offset(x = 5.dp)
                    .scale(checkScale)
            ) {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = null,
                    tint = MaterialTheme.colors.onPrimary.copy(alpha = selectedAlpha),
                    modifier = Modifier.padding(4.dp)
                )
            }
        }
        VerticleSpace(Padding4dp)
        Text(
            text = club.name,
            maxLines = 2,
            style = facrNormal16BodyText().copy(color = color)
        )
    }
}

ViewModel.kt

 val clubs: Flow<PagingData<Club>> = MutableStateFlow(ClubsPagingKey())
            .flatMapLatest { pagingKey -> facrRepository.fetchAllClubs(pagingKey) }
            .cachedIn(viewModelScope)

Where find itemsGridIndexed ?

Can full demo LazyVerticalGrid ?

THX