jetpack compose - WebView progress percentage

MainActivity.kt

package com.cfsuman.jetpackcompose

import android.graphics.Bitmap
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.LinearLayout
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import kotlin.math.roundToInt


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedObjectState: Bundle?) {
        super.onCreate(savedObjectState)
        setContent {
            GetScaffold()
        }
    }


    @Composable
    fun GetScaffold(){
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text(
                        text = "Compose - WebView Progress Percentage"
                    )},
                    backgroundColor = Color(0xFFC0E8D5),
                )
            },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0),
        )
    }


    @Composable
    fun MainContent(){
        val url = remember { mutableStateOf("https://www.msn.com")}
        val visibility = remember { mutableStateOf(false)}
        val progress = remember { mutableStateOf(0.0F)}

        Box(
            modifier = Modifier.fillMaxSize(),
        ){
            Column(
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Row(
                    modifier = Modifier
                        .padding(8.dp),
                    horizontalArrangement = Arrangement.spacedBy(12.dp),
                    verticalAlignment = Alignment.CenterVertically

                ) {
                    Row(
                        modifier = Modifier
                            .padding(8.dp)
                            .clip(RoundedCornerShape(12.dp))
                            .wrapContentHeight(Alignment.CenterVertically),
                        horizontalArrangement = Arrangement.spacedBy(12.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Button(onClick = {
                            url.value = "https://www.msn.com"
                        }) {
                            Text(text = "MSN")
                        }
                        Button(onClick = {
                            url.value = "https://www.yahoo.com"
                        }) {
                            Text(text = "Yahoo")
                        }
                    }

                    if (visibility.value){
                        CircularProgressIndicator(
                            color = Color(0xFFE30022)
                        )
                        Text(
                            text = "${progress.value.roundToInt()}%",
                            fontWeight = FontWeight.Bold
                        )
                    }
                }

                Box(
                    modifier = Modifier
                        .weight(2F)
                ) {
                    AndroidView(factory = { context ->
                        WebView(context).apply {
                            layoutParams = LinearLayout.LayoutParams(
                                LinearLayout.LayoutParams.MATCH_PARENT,
                                LinearLayout.LayoutParams.MATCH_PARENT
                            )
                            settings.javaScriptEnabled = true

                            webViewClient = object: WebViewClient(){
                                override fun onPageStarted(
                                    view: WebView, url: String,
                                    favicon: Bitmap?) {
                                    visibility.value = true
                                }

                                override fun onPageFinished(
                                    view: WebView, url: String) {
                                    visibility.value = false
                                }
                            }

                            // Set web view chrome client
                            webChromeClient = object: WebChromeClient(){
                                override fun onProgressChanged(
                                    view: WebView, newProgress: Int) {
                                    progress.value = newProgress.toFloat()
                                }
                            }

                            loadUrl(url.value)
                        }
                    },update = {
                        it.loadUrl(url.value)
                    })
                }
            }
        }
    }
}