'Jetpack compose Google Maps does not load properly when using bottom navigation

I have been stuck on this all day. I am using the official jetpack compose google maps composable. The map is displayed on one tab of my bottom navigation.

I have turned on save state and restore state when navigating

HomeBottomNavigation(
                        selectedNavigation = currentSelectedItem,
                        onNavigationSelected = { selected ->
                            if (selected.route != currentSelectedItem.route) {
                                navController.navigate(selected.route) {
                                    launchSingleTop = true
                                    restoreState = true

                                    popUpTo(navController.graph.findStartDestination().id) {
                                        saveState = true
                                    }
                                }
                            }
                        },
                        modifier = Modifier
                            .fillMaxWidth()
                    )

Photo of my Bottom Navigation

The problem is when navigating through the bottom navigation quickly. Meaning when I switch fast pages it will not load the map properly. I tried it also on a AndroidView Interop API approach the same thing happens. Please help really dont have an idea why this happens

Here is a video demo



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source