From 0bf8898ca4fd23409936d45bb3242e45475aeaaf Mon Sep 17 00:00:00 2001
From: Kovid Goyal <kovid@kovidgoyal.net>
Date: Tue, 15 Oct 2019 05:25:54 +0530
Subject: [PATCH] Viewer: prevent flash of unstyled text while loading
 individual HTML files

---
 src/pyj/read_book/iframe.pyj    | 12 +++++++-----
 src/pyj/read_book/resources.pyj |  8 +++++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/pyj/read_book/iframe.pyj b/src/pyj/read_book/iframe.pyj
index 25a7e37a7b..0bb4bed9d2 100644
--- a/src/pyj/read_book/iframe.pyj
+++ b/src/pyj/read_book/iframe.pyj
@@ -262,15 +262,17 @@ class IframeBoss:
         self.do_layout(self.is_titlepage)
         if self.mathjax:
             return apply_mathjax(self.mathjax, self.book.manifest.link_uid, self.content_loaded_stage2)
-        self.content_loaded_stage2()
+        window.setTimeout(self.content_loaded_stage2, 1000)
+        # self.content_loaded_stage2()
 
     def content_loaded_stage2(self):
-        # this is the loading styles used to suppress scrollbars during load
-        # added in unserialize_html
-        document.head.firstChild.textContent = ''
-
         self.connect_links()
         self.content_ready = True
+        # this is the loading styles used to suppress scrollbars during load
+        # added in unserialize_html and the overlay to hide flash of unstyled
+        # text
+        document.body.removeChild(document.body.firstChild)
+
         csi = current_spine_item()
         if csi.initial_position:
             ipos = csi.initial_position
diff --git a/src/pyj/read_book/resources.pyj b/src/pyj/read_book/resources.pyj
index 0ea129cd5c..4a47ce5bae 100644
--- a/src/pyj/read_book/resources.pyj
+++ b/src/pyj/read_book/resources.pyj
@@ -236,7 +236,13 @@ def unserialize_html(serialized_data, proceed, postprocess_dom):
     head, body = tree[1], tree[2]  # noqa: unused-local
     clear(document.head, document.body)
     remove_all_attributes(document.head, document.body)
-    document.head.appendChild(E.style(type='text/css', 'html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important }'))
+    # prevent flash of unstyled text during loading, showing
+    # a blank background instead
+    document.body.appendChild(E.div(
+        '\xa0',
+        style=f'position: absolute; z-index: 2147483647; width: 10000vw; height: 10000vh; background-color: {opts.color_scheme.background}',
+        E.style(type='text/css', 'html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important }')
+    ))
     # Default stylesheet
     if not runtime.is_standalone_viewer:
         # for the standalone viewer the default font family is set