fix: Deck Options screen flickers in dark mode

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

@@ -44,6 +44,9 @@ class DeckOptions : PageFragment() {
     }
 
     class DeckOptionsWebClient(val deckId: Long) : PageWebViewClient() {
+        override val promiseToWaitFor: String
+            get() = "\$deckOptions"
+
         override fun onPageFinished(view: WebView?, url: String?) {
             // from upstream: https://github.com/ankitects/anki/blob/678c354fed4d98c0a8ef84fb7981ee085bd744a7/qt/aqt/deckoptions.py#L55
             view!!.evaluateJavascript("const \$deckOptions = anki.setupDeckOptions($deckId);") {

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

@@ -15,26 +15,56 @@
  */
 package com.ichi2.anki.pages
 
+import android.graphics.Bitmap
+import android.webkit.WebResourceRequest
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import androidx.core.view.isVisible
 import com.google.android.material.color.MaterialColors
-import com.ichi2.anki.R
 import com.ichi2.utils.toRGBHex
+import timber.log.Timber
 
 /**
  * Base WebViewClient to be used on [PageFragment]
  */
 open class PageWebViewClient : WebViewClient() {
-    override fun onPageFinished(view: WebView?, url: String?) {
-        super.onPageFinished(view, url)
+
+    /** Wait for the provided promise to complete before showing the WebView */
+    open val promiseToWaitFor: String? = null
+
+    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+        super.onPageStarted(view, url, favicon)
         view?.let { webView ->
             val bgColor = MaterialColors.getColor(webView, android.R.attr.colorBackground).toRGBHex()
-            webView.evaluateJavascript("document.body.style.backgroundColor = '$bgColor';") {}
+            webView.evaluateJavascript("""document.body.style.setProperty("background-color", "$bgColor", "important")""") {
+                Timber.v("backgroundColor set")
+            }
+        }
+    }
 
+    override fun onPageFinished(view: WebView?, url: String?) {
+        super.onPageFinished(view, url)
+        if (view == null) return
+
+        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 */
-            webView.isVisible = true
+            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")
+            }
+        }
+    }
+
+    override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
+        if (view == null || request == null) return super.shouldOverrideUrlLoading(view, request)
+        if (request.url.toString() == "page-fully-loaded:") {
+            Timber.v("displaying WebView after '$promiseToWaitFor' executed")
+            view.isVisible = true
+            return true
         }
+        return super.shouldOverrideUrlLoading(view, request)
     }
 }