Hello, I have a `LoadingView` that should be centered on the screen but `BoxScope` is not working if...

# compose

[nuhkoca]

Hello, I have a LoadingView that should be centered on the screen but BoxScope is not working if I use CrossFade animation. It always appears on the left hand corner by default. However, if I do not wrap `Composable`s into CrossFade, it is working as expected. Somehow LoadingView is losing BoxScope. What should I do?

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(it)
        .verticalScroll(scrollState)
) {
    Crossfade(targetState = collectionState) { state ->
        when (state) {
            CollectionState.Loading -> LoadingView()
            ...
        }
    }
}

@Composable
private fun BoxScope.LoadingView() {
    Box(modifier = Modifier.align(Alignment.Center)) {
        TRCircularProgressIndicator()
    }
}

[Albert Chang]

Modifier.align() only works on direct children of a Box so you should apply the modifier on Crossfade.

[nuhkoca]

You mean applying align on Crossfade? I don't want other `Composables`(Error and Success views) to be centered but only Loading.

[Albert Chang]

Then use another Box in Crossfade.

[Albert Chang]

Or use Modifier.fillMaxSize().wrapContentSize(align = Alignment.Center) on LoadingView.

[nuhkoca]

Only centered horizontally but not vertically