State changes don't reflect properly when re-composing based on a new state

[rllyhz]

Suppose I have a loading layout:

@Composable
fun ExampleIndicator(
  state: PullRefreshState,
  modifier: Modifier = Modifier,
) {
  Box(
    modifier = modifier.fillMaxWidth(),
  ) {
    if (state.isPullInProgress) {
      Text("Pull more to refresh")
    } else if (state.isAbleToRelease) {
      Text("Release to refresh")
    } else if (state.isRefreshing) {
      Text("Fetching new data...")
    }
  }
}

By using this expression, the layout didn't reflect properly when the state changes occurred. It seems like the order of checking the state matters because when the PullRefreshState changes, it is possible that it's not only one single state changes.

For example:
When the state is on the isAbleToRelease state, the isPullInProgress state also probably occurs

To overcome this bug, It's better to have a wrapper composable function to handle it.