Hello! I need to display a `CircularProgressIndica...

# compose

[Zhang Zihan]

Hello! I need to display a CircularProgressIndicator centered when there are no items in a LazyVerticalGrid.
In a `LazyColumn`'s LazyItemScope, this can be easily achieved using `Modifier.fillParentMaxSize`:

LazyColumn {
    item {
        Text("Some header", modifier = Modifier.fillMaxWidth())
    }
    item {
        Box(modifier = Modifier.fillParentMaxSize(), contentAlignment = Alignment.Center) {
            CircularProgressIndicator()
        }
    }
}

However, Modifier.fillParentMaxSize is not available in a LazyGridItemScope of a `LazyVerticalGrid`:

LazyVerticalGrid(columns = GridCells.Adaptive(160.dp)) {
    item(span = { GridItemSpan(maxLineSpan) }) {
        Text("Some header")
    }
    item {
        Box(modifier = Modifier.fillParentMaxSize(), contentAlignment = Alignment.Center) {
                                ^^^^^^^^^^^^^^^^^ Unresolved reference 'fillParentMaxSize'.
            CircularProgressIndicator()
        }
    }
}

Is there any alternative way to achieve the same effect?

[Stylianos Gakis]

You can put the loading indicator and the lazy layout in a box and conditionally show the loading indicator.
Something like:

Box() {
  LazyVerticalGrid() { ... }
  if (noItemsInGrid) { CircularProgressIndicator(Modifier.align(Alignment.Center)) }
}

[Zhang Zihan]

Because LazyVerticalGrid has a header that is always displayed, the indicator displayed by this way is not centered in the blank area.

I used a similar alternative way to achieve this:

if (items == null) {
    LazyColumn {
        item {
            Text("Some header", modifier = Modifier.fillMaxWidth())
        }
        item {
            Box(modifier = modifier.fillParentMaxSize(), contentAlignment = Alignment.Center) {
                CircularProgressIndicator()
            }
        }
    }
} else {
    LazyVerticalGrid(...) {
            item(span = { GridItemSpan(maxLineSpan) }) {
                Text("Some header")
            }
            items(items) { ... }
        }
}