Bug Report: CreationScreen Toolbar and targetState mismatch during HorizontalPager animation

[kez-lab]

Describe the bug

In the CreationScreen's HorizontalPager, if the user interacts with the screen or toolbar before the page transition animation fully completes, the currently visible page and the page title displayed in the top Toolbar can become out of sync.
For example, the user may see the "Prompt" page, but the Toolbar still shows "Photo Upload", causing confusion.

To Reproduce

1. Start a pager transition animation from the first page (e.g., "Photo Upload") to the second page (e.g., "Text Input")
2. Before the animation completes, quickly tap/click the screen
3. Result: The "Prompt" page is visible, but the Toolbar still displays "Photo"

Expected behavior

• After the page transition animation completes, the Toolbar title should always match the currently visible page
• Even if the user interacts rapidly during the animation, the Toolbar and the visible content should always be in sync

Screenshots / Logs

Screen_recording_20250522_213720.webm

[kez-lab]

To temporarily address this issue, I plan to modify the code so that the ViewModel state and the actual pager's current page are synchronized only after the animateScrollToPage animation completes, as shown below:

LaunchedEffect(uiState.selectedPromptOption) {
    launch {
        pagerState.animateScrollToPage(
            uiState.selectedPromptOption.ordinal,
            animationSpec = spatialSpec,
        )
    }.invokeOnCompletion {
        if (uiState.selectedPromptOption != PromptType.entries[pagerState.currentPage]) {
            onSelectedPromptOptionChanged(PromptType.entries[pagerState.currentPage])
        }
    }
}

This ensures that the state is only updated after the animation finishes, which prevents the Toolbar and the visible page from being out of sync.