fix(deck-options): add progress bar to stop flickering

`deckOptionsReady` allows us to know exactly when the backend is ready,
instead of showing the WebView in PageWebViewClient.onPageFinished

Stop showing the WebView in `onPageFinished`, and wait for `deckOptionsReady`

A `CircularProgressIndicator` has been added as the wait is noticeable (~300ms)

Once the WebView is shown, hide the Progress Bar

promiseToWaitFor and `:page-fully-loaded` are also removed
as unused, and these were primarily for DeckOptions

Fixes 14194 (better): deck options no longer flicker

Author: david-allison

AnkiDroid/src/main/java/com/ichi2/anki/pages/DeckOptions.kt

@@ -18,10 +18,12 @@ package com.ichi2.anki.pages
 import android.content.Context
 import android.content.Intent
 import android.os.Bundle
+import android.view.View
 import android.webkit.JavascriptInterface
 import android.webkit.WebResourceRequest
 import android.webkit.WebView
 import androidx.activity.OnBackPressedCallback
+import androidx.core.view.isVisible
 import androidx.fragment.app.FragmentActivity
 import anki.collection.OpChanges
 import anki.collection.Progress
@@ -136,6 +138,15 @@ class DeckOptions : PageFragment() {
         }
     }
 
+    /** @see onWebViewReady */
+    override fun onViewCreated(
+        view: View,
+        savedInstanceState: Bundle?,
+    ) {
+        pageLoadingIndicator.isVisible = true
+        super.onViewCreated(view, savedInstanceState)
+    }
+
     override fun onWebViewCreated(webView: WebView) {
         // addJavascriptInterface needs to happen before loadUrl
         webView.addJavascriptInterface(ModalJavaScriptInterfaceListener(), "ankidroid")
@@ -152,6 +163,11 @@ class DeckOptions : PageFragment() {
         return object : PageWebViewClient() {
             private val ankiManualHostRegex = Regex("^docs\\.ankiweb\\.net\$")
 
+            /** @see onWebViewReady */
+            override fun onShowWebView(webView: WebView) {
+                // no-op: handled in onVebViewReady
+            }
+
             override fun shouldOverrideUrlLoading(
                 view: WebView?,
                 request: WebResourceRequest?,
@@ -205,7 +221,8 @@ class DeckOptions : PageFragment() {
 
     fun onWebViewReady() {
         Timber.d("WebView ready to receive input")
-        // TODO: handle this
+        webView.isVisible = true
+        pageLoadingIndicator.isVisible = false
     }
 
     companion object {

AnkiDroid/src/main/java/com/ichi2/anki/pages/PageFragment.kt

@@ -28,6 +28,7 @@ import androidx.annotation.LayoutRes
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
 import com.google.android.material.appbar.MaterialToolbar
+import com.google.android.material.progressindicator.CircularProgressIndicator
 import com.ichi2.anki.R
 import com.ichi2.anki.SingleFragmentActivity
 import com.ichi2.themes.Themes
@@ -46,6 +47,15 @@ open class PageFragment(
     lateinit var webView: WebView
     private val server = AnkiServer(this).also { it.start() }
 
+    /**
+     * A loading indicator for the page. May be shown before the WebView is loaded to
+     * stop flickering
+     *
+     * @exception IllegalStateException if accessed before [onViewCreated]
+     */
+    val pageLoadingIndicator: CircularProgressIndicator
+        get() = requireView().findViewById(R.id.page_loading)
+
     /**
      * Override this to set a custom [WebViewClient] to the page.
      * This is called in [onViewCreated].

AnkiDroid/src/main/java/com/ichi2/anki/pages/PageWebViewClient.kt

@@ -34,9 +34,6 @@ import java.io.IOException
  * Base WebViewClient to be used on [PageFragment]
  */
 open class PageWebViewClient : WebViewClient() {
-    /** Wait for the provided promise to complete before showing the WebView */
-    open val promiseToWaitFor: String? = null
-
     val onPageFinishedCallbacks: MutableList<OnPageFinishedCallback> = mutableListOf()
 
     override fun shouldInterceptRequest(
@@ -87,57 +84,27 @@ open class PageWebViewClient : WebViewClient() {
         }
     }
 
+    /**
+     * Shows the WebView after the page is loaded
+     *
+     * This may be overridden if additional 'screen ready' logic is provided by the backend
+     * @see DeckOptions
+     */
+    open fun onShowWebView(webView: WebView) {
+        Timber.v("Displaying WebView")
+        webView.isVisible = true
+    }
+
     override fun onPageFinished(
         view: WebView?,
         url: String?,
     ) {
         super.onPageFinished(view, url)
         if (view == null) return
         onPageFinishedCallbacks.map { callback -> callback.onPageFinished(view) }
-        if (promiseToWaitFor == null) {
-            /** [PageFragment.webView] is invisible by default to avoid flashes while
-             * the page is loaded, and can be made visible again after it finishes loading */
-            Timber.v("displaying WebView")
-            view.isVisible = true
-        } else {
-            view.evaluateJavascript(
-                """$promiseToWaitFor.then(() => { console.log("page-fully-loaded:"); window.location.href = "page-fully-loaded:" } )""",
-            ) {
-                Timber.v("waiting for '$promiseToWaitFor' before displaying WebView")
-            }
-        }
-    }
-
-    @Suppress("DEPRECATION", "OVERRIDE_DEPRECATION") // still needed for API 23
-    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
-        if (view == null || url == null) return super.shouldOverrideUrlLoading(view, url)
-        if (handleUrl(view, url)) {
-            return true
-        }
-        return super.shouldOverrideUrlLoading(view, url)
-    }
-
-    override fun shouldOverrideUrlLoading(
-        view: WebView?,
-        request: WebResourceRequest?,
-    ): Boolean {
-        if (view == null || request == null) return super.shouldOverrideUrlLoading(view, request)
-        if (handleUrl(view, request.url.toString())) {
-            return true
-        }
-        return super.shouldOverrideUrlLoading(view, request)
-    }
-
-    private fun handleUrl(
-        view: WebView,
-        url: String,
-    ): Boolean {
-        if (url == "page-fully-loaded:") {
-            Timber.v("displaying WebView after '$promiseToWaitFor' executed")
-            view.isVisible = true
-            return true
-        }
-        return false
+        /** [PageFragment.webView] is invisible by default to avoid flashes while
+         * the page is loaded, and can be made visible again after it finishes loading */
+        onShowWebView(view)
     }
 }
 

AnkiDroid/src/main/res/layout/page_fragment.xml

@@ -2,6 +2,7 @@
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
@@ -15,10 +16,32 @@
         app:navigationIcon="?attr/homeAsUpIndicator"
         />
 
-    <WebView
-        android:id="@+id/webview"
+
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:visibility="invisible"/>
+        >
+        <com.google.android.material.progressindicator.CircularProgressIndicator
+            android:id="@+id/page_loading"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:indeterminate="true"
+            android:visibility="gone"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            tools:visibility="visible" />
+
+        <WebView
+            android:id="@+id/webview"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:visibility="invisible"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
 
 </LinearLayout>