Material 3 Expressive実装例 : Loading indicator

Material 3 Expressive の実装例の紹介シリーズです。
今回は新たに追加されたコンポーネントである Loading indicator を紹介します。
(androidx.compose.material3:material3:1.4.0-alpha15 時点での内容になります。)

Loading indicator とは

Indeterminate な Circular progress indicator の代わりに使うことが推奨されるコンポーネントで、5　秒以内に読み込みが完了する処理の進行中であることを表すコンポーネントです。
Pull to refresh のインジケータとしても使用可能です。

実装

contained と uncontained

Loading indicator には contained と uncontained の 2 パターンがあり、どちらも標準で実装が用意されています。

// contained
ContainedLoadingIndicator()

// uncontained
LoadingIndicator()

Pull to refresh との組み合わせ

Pull to refresh で使う Loading indicator の PullToRefreshDefaults#LoadingIndicator が標準で用意されています。

val state = rememberPullToRefreshState()
PullToRefreshBox(
    state = state,
    isRefreshing = isRefreshing,
    onRefresh = onRefresh,
    indicator = {
        PullToRefreshDefaults.LoadingIndicator(
            state = state,
            isRefreshing = isRefreshing,
            modifier = Modifier.align(Alignment.TopCenter),
        )
    }
) { ... }

ガイドラインのようにスケールして表示させたい場合はカスタマイズすることで近づけることができます。

val state = rememberPullToRefreshState()
val scaleFraction = {
    if (isRefreshing) {
        1f
    } else {
        LinearOutSlowInEasing.transform(state.distanceFraction).coerceIn(0f, 1f)
    }
}
Box(
    Modifier
        .pullToRefresh(
            state = state,
            isRefreshing = isRefreshing,
            onRefresh = onRefresh
        )
) {
    ...
    Box(
        Modifier
            .align(Alignment.TopCenter)
            .graphicsLayer {
                scaleX = scaleFraction()
                scaleY = scaleFraction()
            }
    ) {
        PullToRefreshDefaults.LoadingIndicator(
            state = state,
            isRefreshing = isRefreshing
        )
    }
}