ModifierでComposeを遅延表示する

はじめに

Twitter で下記の記事を読みました。ネットワークの高速化などにより、モバイルのローディング画面が一瞬だけ表示される場合があり、UX 的に良くない場合があります。Indicator を遅延表示することで解決しており、それを SwiftUI で解説されています。

私も以前から同様の問題で悩んでおり、本記事では同様の内容を Jetpack Compose でやってみたいと思います。

実装

1. delayAppearance 関数を作成

こちらを参考に以下の Modifier 拡張関数を作成します。
composedを使用することで stateful な Modifier を作成します。引数で指定されたミリ秒数後に alpha を 1 とすることで遅延表示を実現します。

fun Modifier.delayAppearance(
    delayMills: Long = 300L
) = composed(
    inspectorInfo = debugInspectorInfo {
        name = "delayAppearance"
        value = delayMills
    },
    factory = {
        var isShow by remember { mutableStateOf(false) }
        LaunchedEffect(Unit) {
            delay(delayMills)
            isShow = true
        }
        this.graphicsLayer {
            alpha = if (isShow) 1f else 0f
        }
    }
)

2. delayAppearance を使う

使用する側はいたって簡単で Modifier に渡してあげれば良いだけです。

@Composable
fun LoadingScreen() {
    Box(
        modifier = Modifier.fillMaxSize().delayAppearance(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator()
    }
}

成果物

GitHub のレポジトリは下記です。
https://github.com/goutarouh/ComposeDelayAppearance

gif を張るのは面倒..なので、冒頭で紹介したこちらの記事を見てください。だいたい同じようなものが作れますよ..

参考

composed の公式ドキュメント
Improving the Loading Experience in SwiftUI