How can a CircularProgressIndicator composable be displayed until every AdvancedMarker has been added to Maps? There are a lot of markers, and a frozen screen is noticed until all markers are added

I'm using MVVM, but I'm not sure how to deal with this using the viewmodel and the "loading" variable of the UiState because this stuff is exclusively from UI, it's UI logic. I tried setting to true the loading variable in the uistate of my viewmodel when the markers are being loaded, and set it to false when over, and I tried it calling vm.setLoading(true) and vm.setLoading(false) before and after that for.

For displaying the progress I embedded the map and this circular progress inside a box, but it didn't worked, and the progress is not being displayed.

Box(
    modifier = modifier.fillMaxSize()
) {
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        vm.setLoading(true)
        for (itemin uiState.data) {
            AdvancedMarker(
                state = rememberMarkerState(position = LatLng(item.lat, item.lon)),
                title = item.name
            )
        }
        vm.setLoading(false)
    }

    if (uiState.loading) {
        Box(Modifier.fillMaxSize().background(Color.White.copy(alpha = 0.5f)))
        CircularProgressIndicator(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center))
    }
}

How can a CircularProgressIndicator composable be displayed until every AdvancedMarker has been added to Maps? There are a lot of markers, and a frozen screen is noticed until all markers are added

I'm using MVVM, but I'm not sure how to deal with this using the viewmodel and the "loading" variable of the UiState because this stuff is exclusively from UI, it's UI logic. I tried setting to true the loading variable in the uistate of my viewmodel when the markers are being loaded, and set it to false when over, and I tried it calling vm.setLoading(true) and vm.setLoading(false) before and after that for.

For displaying the progress I embedded the map and this circular progress inside a box, but it didn't worked, and the progress is not being displayed.

Box(
    modifier = modifier.fillMaxSize()
) {
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        vm.setLoading(true)
        for (itemin uiState.data) {
            AdvancedMarker(
                state = rememberMarkerState(position = LatLng(item.lat, item.lon)),
                title = item.name
            )
        }
        vm.setLoading(false)
    }

    if (uiState.loading) {
        Box(Modifier.fillMaxSize().background(Color.White.copy(alpha = 0.5f)))
        CircularProgressIndicator(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center))
    }
}

• android
• kotlin
• mvvm
• android-jetpack-compose
• google-maps-android-api-2

2 Answers 2

Each time the composition is updated, vm.setLoading(false) is called.

Replace

vm.setLoading(false)

with

if(uiState.isDataLoaded)
{
    for (itemin uiState.data) {
        AdvancedMarker(
            state = rememberMarkerState(position = LatLng(item.lat, item.lon)),
            title = item.name
        )
    }
    vm.setLoading(false)
}

and remove vm.setLoading(true) to start the loading of uiState.data

The example that uses LiveData for the state of a view and the CircularProgressIndicator: https://github.com/kl-demo/mvvm-compose-hilt-example/blob/main/app/src/main/java/kldemo/mvvmcomposehiltexample/presentation/langs/ProgrammingLanguagesScreen.kt#L66

You can use delay in your viewmodel first like 1000ms with delay(1000) before _uiState.value=_uiState.value.copy(loading = false)

After in your ui use LaunchedEffect(Unit) { vm.loadMarkers() // your function in vm } And remove vm.setLoading(false)