navigation-compose first renders a null destination before rendering the start destination which cre...

# compose

[Jason Ankers]

navigation-compose first renders a null destination before rendering the start destination which creates a brief flicker. Any way around this?

[Ian Lake]

The graph is applied immediately when composition happens (via a DisposableEffect), there's no delay involved

[Jason Ankers]

This will show a brief flicker of red - do you know what might be causing it?

@Composable
fun RootNavHost() {
    val navController = rememberNavController()
    Box(Modifier.background(Color.Red).fillMaxSize()) {
        NavHost(navController, startDestination = "home") {
            composable("home") {
                Box(Modifier
                    .background(Color.White)
                    .fillMaxSize()) {
                    Text("Home screen")
                }
            }
        }
    }
}

[Ian Lake]

Probably your background(Color.Red) 😛 You can certainly use the currentBackStackEntryAsState() to change what logic you want (whether to apply a red background behind a white background...double painting everything), but you can't change how DisposableEffect works

[Jason Ankers]

Yeah, I had hoped that the first destination would appear as part of the first render (compose?) so you wouldn’t see the red background at all. The use case we’re facing is when the app loads for the first time, theres a flicker of empty content before the first screen appears. If this is just a limitation we have to live with it’s not a huge deal

[Zach Klippenstein (he/him) [MOD]]

If the graph is applied in an effect like Ian said, then wouldn’t the sequence be roughly:

1. initial composition. Graph enters the composition, DisposableEffect enters the composition.
2. initial composition completes successfully
3. LayoutNodes are emitted and effects are ran. Effect from 1 applies the nav graph, which schedules another composition to compose the initial destination.
4. first frame finishes, drawing red background
5. Next frame starts to be prepared, triggering another composition.
6. Initial graph destination is now composed, but only in time for second frame.

[Jason Ankers]

Yep that makes sense. React has useLayoutEffect to solve this exact problem, does compose have anything similar?