EmptySection flickers during pane transition animations due to premature state cleanup

[wo55555]

Description:
When using ListDetailPaneScaffold with AnimatedPane, navigating between the list pane and the detail pane causes the EmptySection to briefly flash during the enter and exit animations in phone-size screen.

Entry Problem:

LaunchedEffect(chatId) {
    viewModel.onAction(ChatDetailAction.OnSelectChat(chatId))  // ← changed after entry the detail pane
}

Back Problem:

BackHandler(enabled = scaffoldNavigator.canNavigateBack()) {
    scope.launch {
        scaffoldNavigator.navigateBack()
        viewModel.onAction(OnSelectChat(null))  // ← too early
    }
}

Solve:
Maybe can observe the chatId and state.chatUi at the same time to solve the entry problem:

showEmptySection = chatId == null && state.chatUi == null  // add a new variable in the ChatDetailScreen

and change the chatId in ChatListDetailAdaptiveLayout:

detailPane = {
    AnimatedPane {
        // Cleanup fires AFTER exit animation completes and content leaves composition
        DisposableEffect(Unit) {
            onDispose {
                viewModel.onAction(OnSelectChat(null))
            }
        }
        ...
    }
}