Accompanist webview prevents other composables from showing

Question

I have the following screen which should show a loading indicator while the website isn't shown. However the WebView prevents any other composables from showing up until it is ready to show the website.

How can I show something else on this screen before the website shows up?

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.google.accompanist.web.LoadingState
import com.google.accompanist.web.WebView
import com.google.accompanist.web.rememberWebViewState

@Composable
fun UrlScreen() {
    val state = rememberWebViewState(url = "https://stackoverflow.com")
    Column {
        val loadingState = state.loadingState
        if (loadingState is LoadingState.Loading) {
            LinearProgressIndicator(
                progress = loadingState.progress,
                modifier = Modifier.fillMaxWidth()
            )
        }
        Text("This text won't show up before the website shows up.")
        WebView(
            state = state,
            modifier = Modifier.weight(1f),
        )
    }
}

Answer 1

I faced a similar issue while I was implementing my own WebView wrapper based on Accompanist WebView component. I had flag android:hardwareAccelerated="true in the manifest for the WebWiew's hosted activity. In my case adding setLayerType(View.LAYER_TYPE_SOFTWARE, null) for the CustomWebView component fixed the issue.

Here is snipped of my code:

AndroidView(
    factory = { context ->
        CustomWebView(context).apply {
            setLayerType(View.LAYER_TYPE_SOFTWARE, null)
           }
   })

Maybe it will help or direct you to the solution.