JetpackComposeのWebViewで上部に読み込みインジケータを表示する

はじめに

今回はJetpackComposeのWebViewで上部に読み込みインジケータを表示する方法を紹介していきます

本文

Composebale関数内で下記の処理を記述します
newProgressは1から100で帰ってきますがProgressIndicatorは0から1で表示するので
渡す場合は100で割らないとずっと読み込み完了のままインジケータが進みません

val isLoading = remember { mutableStateOf(true) } 
val currentProgress = remember { mutableStateOf(0f) }

val webChromeClient = object : AccompanistWebChromeClient() {
    override fun onProgressChanged(view: WebView?, newProgress: Int) {
        super.onProgressChanged(view, newProgress)
        currentProgress.value = newProgress.toFloat() / 100f
        isLoading.value = newProgress < 100
    }
}

if (isLoading.value) {
    LinearProgressIndicator(
        progress =  currentProgress.value,
        modifier = Modifier.fillMaxWidth(),
    )
}

最後に

昔はAndroidViewで書いていたWebViewも公式から出てくるようになり色々実装できるようになったので備忘録として今回の記事を書きました
どなたかのお役に立てれば幸いです