Hi everyone, In my app, there is a bottom navigati...

# compose

[muthuraj]

Hi everyone,
In my app, there is a bottom navigation bar with 4 items and I'm using compose navigation to navigate between the main content based on the bottom nav item selection.
I save the whole UI state in ViewModel scoped to the parent composable (where the bottom nav is placed) so that the UI state won't be recreated on tab switching.
Still, there is a noticeable delay in switching tabs since the whole compose UI needs to be rendered freshly for each tab.

I had this exact structure for an old app where I used fragments and I solved this by saving the fragment instances in the activity and using show/hide from fragment manager. Is there any way to do a similar thing with composables here? I'm even fine with moving away from compose navigation for this particular case.

[muthuraj]

I achieved it using HorizontalPager and setting beyondBoundsPageCount as 4.
But now all 4 tabs are being composed instantly, I need to check if there is a way to delay creating composables until the corresponding bottom nav item is clicked.

[dorche]

I'm assuming this is for Android so better ask in #compose-android but have you checked https://developer.android.com/jetpack/compose/navigation#bottom-nav?

navController.navigate(screen.route) {
  // Pop up to the start destination of the graph to
  // avoid building up a large stack of destinations
  // on the back stack as users select items
  popUpTo(navController.graph.findStartDestination().id) {
    saveState = true
  }
  // Avoid multiple copies of the same destination when
  // reselecting the same item
  launchSingleTop = true
  // Restore state when reselecting a previously selected item
  restoreState = true
}

sounds a lot like what you want

[muthuraj]

Thank you. I was not aware of the Android-specific channel.
And I tried the approach mentioned in the documentation first and in that, the tab UI is recreated for each tab which was not what I wanted.