PullRefreshIndicator circle always displaying on jetpack compose

Question

A blank grey circle of PullToRefreshContainer is always displaying even first time or after refreshing.

Here is my code

val pullRefreshState = rememberPullToRefreshState()

Box(
    modifier = Modifier
        .fillMaxSize()
        .nestedScroll(connection = pullRefreshState.nestedScrollConnection)
) {
    // Another contents

    PullToRefreshContainer(
        modifier = Modifier.align(alignment = Alignment.TopCenter),
        state = pullRefreshState,
    )
}

Current compose version: 1.6.4

Any help!

Answer 1

This bug has been fixed in the PullToRefreshBox component, which is available in androidx.compose.material3 version 1.3.0-beta05 or higher. To resolve the issue:

• Update your Material 3 dependency to at least version 1.3.0-beta05.
• Replace PullToRefreshContainer with PullToRefreshBox in your code.

val pullToRefreshState = rememberPullToRefreshState()
var isRefreshing by remember { mutableStateOf(false) }

val onRefresh: () -> Unit = {
    isRefreshing = true
    // Simulated delay for refresh operation
    delay(1000)
    isRefreshing = false
}

PullToRefreshBox(
    isRefreshing = isRefreshing,
    onRefresh = { onRefresh() },
    state = pullToRefreshState,
) {
    // Scrollable content goes here
    content()
}