Compose Navigation screen blinks when navigate to another screen

Question

When i am trying to navigate to another screen by .clickable on modifier i got this. Never faced such problem earlier. This is how i navigate and what i see on screen.

What i show if response from network is successful. onCategorySelectedListener is attached to CategoryGrid as shown below.

SuccessfulScreen(
            modifier = modifier,
            onCategorySelectedListener = {
                if (navController.currentDestination?.route != "${Destinations.SelectedCategoryScreen.route}/$it")
                    navController.navigate(
                        route = "${Destinations.SelectedCategoryScreen.route}/$it"
                    )
            },
            categories = state.categories
        )

CategoriesGrid(
            modifier = modifier.fadingEdge(topFade),
            categories = categories,
            onCategorySelectedListener = onCategorySelectedListener,
        )

Screen record: What i see on screen

I am using androidx.navigation:navigation-compose:2.7.2

Answer 1

Well I figured everything out. The thing was that I created ViewModel with Dagger similar to how I did it with Views. So I simply write some ViewModelFactory with map in it and so on but it didn't work so ViewModel was always being recreated and due to that fact new state was emitted and recomposition triggered. I searched in internet and found this nice solution and after a couple of changes that I needed for myself it now works perfectly. I still create ViewModel inside composable {} in my NavHost but now it is not recreated every time but created only once and then just reused by Dagger.

Answer 2

I solved this problem.

I got the same issue having a "scaffold-per-screen" architecture. What helped, to my surprise, was lowering androidx.navigation:navigation-compose version to 2.4.0-alpha04.