IssueTracker

Jetpack Compose version: ComposePlugin 1.7.0 (Originally on 1.6.10)

Jetpack Compose component(s) used: HorizontalPager

Android Studio Build:
Android Studio Jellyfish | 2023.3.1 RC 2
Build #AI-233.14808.21.2331.11678080, built on April 5, 2024

Kotlin version: 2.0.0

Steps to Reproduce or Code Sample to Reproduce:

The issue, TL;DR, the Pager snaps to spacing and depending on placement also treats it as an item. Creates incorrect placements, updates and sometimes jankyness.

Trying to build a Horizontal Pager width pages being a desired width (200.dp), fixed spacing between (56.dp), snap on center and then also have the first and last item ALSO center; i.e use horizontal content padding to place it in the center (screenwidth/2 - page/2 + pageSpacing).
(It would be great if the SnapPosition.Center could take an argument to allow that, but that's beside the point really)
Issues:
* The last item is regarded as the content spacing
* The first items does not show correctly at all and first page is never shown fully
* Sometimes the pager snaps center on the pageSpacing and not the pages
* Because the last item is the space, the callbackFlow reports the shown page to be one less; and perhaps more after we've gone past a few page spacings.
* Have experienced issues with both/only pageSpacing and contentPadding

The code below is a bit jumpy to indicate that I've tried approaches both where itemSpacing is used and eliminated (handled manually "on the page").
```
var horizontalPadding: Dp by remember { mutableStateOf(0.dp) }
/// ...
// Parent Container modifier
.onPlaced {
                if (it.size.width == 0) return@onPlaced
                val screenWidth = with(density) { it.size.width.toDp() }
                horizontalPadding = (screenWidth / 2) - 100.dp + 56.dp
            }
// ...
val pagerState = rememberPagerState(initialPage = state.dayWheels.lastIndex) { state.dayWheels.count() }
// ...
var dateText: String by remember { mutableStateOf("") }
LaunchedEffect(Unit) {
    snapshotFlow { pagerState.currentPage }.collect { page ->
        val day = state.dayWheels[page].date
        dateText = "($page)" + DateFormatter.formatTrainingDay(day) + " - ${state.dayWheels[page].score}"
        actions.showSessionsForDay(day) // Updates column/items below wheel
    }
}
Text(text = dateText)

if (horizontalPadding.value > 0F)
    HorizontalPager(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.DarkGray),
        key = { state.dayWheels[it].date.toString() },
        state = pagerState,
 // 1.       pageSize = PageSize.Fixed((200 + 28 * 2).dp),
 // 2.       pageSize = PageSize.Fixed(200.dp),
        pageSpacing = 56.dp,
        snapPosition = SnapPosition.Center,
        contentPadding = PaddingValues(horizontal = horizontalPadding)
    ) { page ->
        val actualPage = page.coerceIn(0, state.dayWheels.lastIndex)
        val wheelDay = remember { state.dayWheels[actualPage] }
        Timber.d("Pager: ($page->$actualPage) ${wheelDay.let { "Wheel(${it.date}, ${it.score}, ${it.animationState.name})" }}")

        ScoreWheel(
            modifier = Modifier
                .height(200.dp)
                .border(1.dp, Color.Black)
(based on approach) //   .padding(horizontal = 28.dp)
                .border(1.dp, Color.Yellow),
            stuff = wheelDay.stuff
        )
    }
```

At the time of reporting I am unable to reproduce intermittent states where the page spacing gets centered, but that has also happened. But as visible in screenshots and the video the content padding on the end is regarded as an item. And in the image of two unfilled wheels - they are empty because the items/pages are not properly regarded as "pages shown". (`actions.showSessionsForDay(day)` in the callbackFlow also updates the state so that the model passed in to the wheel is set to start an animation; which also )