How to show CircularProgressIndicator when adding markers to Maps?

Question

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))
    }
}

score 0 · Accepted Answer · 2025-02-14 14:07:32Z

0

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#L63

edited Feb 14 at 14:07

answered Feb 7 at 10:11

user8814991

Sign up to request clarification or add additional context in comments.

Comments

ponyboyltc · Accepted Answer · 2025-02-06 11:04:39Z

-1

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)

answered Feb 6 at 11:04

ponyboyltc

11 bronze badge

2 Comments

tyg Feb 6 at 13:49

What if it takes longer than 1 second (or whatever you chose as the delay)? What if it takes considerably less time - why should the user wait unnecessarily? -- The proper solution would be to wait as long as it takes for all markers to be placed, not an arbitrary amount of time that will most of the time either be too short or too long. You can edit your anwer and improve on it.

NullPointerException Feb 6 at 17:46

@tyg there is something wrong in this answer, neither you or ponyboyltc understood the question. The problem here is not in how much time vm.loadMarkers() takes, the markers retrieving is already safely obtained and protected by a loading progress. The problem is that there are thousands of markers and compose freezes adding thousands of markers, please read carefully the question again.

Collectives™ on Stack Overflow

How to show CircularProgressIndicator when adding markers to Maps?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related