Show a loading message while the current html file is loading

src/pyj/read_book/iframe.pyj

@@ -129,6 +129,7 @@ class IframeBoss:
             elif ipos.type is 'cfi':
                 self.jump_to_cfi(ipos.cfi)
         self.update_cfi()
+        self.send_message('content_loaded')
 
     def update_cfi(self):
         cfi = at_current()

src/pyj/read_book/overlay.pyj

@@ -1,15 +1,69 @@
 # vim:fileencoding=utf-8
 # License: GPL v3 Copyright: 2016, Kovid Goyal <kovid at kovidgoyal.net>
-from __python__ import hash_literals
+from __python__ import hash_literals, bound_methods
 
-from read_book.globals import iframe_id
+from dom import clear, set_css
+from elementmaker import E
+from book_list.theme import get_color
+from widgets import create_spinner
+
+class LoadingMessage:  # {{{
+
+    def __init__(self, msg):
+        self.msg = msg or ''
+
+    def show(self, container):
+        container.style.backgroundColor = get_color('window-background')
+        container.appendChild(
+            E.div(
+                style='text-align:center',
+                E.div(create_spinner('100px', '100px')),
+                E.h2()
+        ))
+        container.firstChild.lastChild.innerHTML = self.msg
+        set_css(container.firstChild, position='relative', top='50%', transform='translateY(-50%)')
+# }}}
 
 class Overlay:
 
     def __init__(self, view):
         self.view = view
+        c = self.clear_container()
+        c.addEventListener('click', self.container_clicked)
+        self.panels = []
+
+    def clear_container(self):
+        c = self.container
+        clear(c)
+        c.style.backgroundColor = 'transparent'
+        return c
 
     @property
     def container(self):
-        return document.getElementById(iframe_id).nextSibling
+        return document.getElementById('book-overlay')
 
+    def container_clicked(self, evt):
+        if self.panels.length and type(self.panels[-1].onclick) is 'function':
+            self.panels[-1].onclick(evt)
+
+    def show_loading_message(self, msg):
+        lm = LoadingMessage(msg)
+        self.panels.push(lm)
+        self.show_current_panel()
+
+    def hide_loading_message(self):
+        if self.panels.length and isinstance(self.panels[-1], LoadingMessage):
+            self.hide_current_panel()
+
+    def hide_current_panel(self):
+        self.panels.pop()
+        if self.panels.length:
+            self.show_current_panel()
+        else:
+            self.container.style.display = 'none'
+
+    def show_current_panel(self):
+        c = self.clear_container()
+        c.style.display = 'block'
+        if self.panels.length:
+            self.panels[-1].show(c)

src/pyj/read_book/view.pyj

@@ -65,6 +65,7 @@ class View:
             'goto_doc_boundary': self.goto_doc_boundary,
             'scroll_to_anchor': self.on_scroll_to_anchor,
             'update_cfi': self.on_update_cfi,
+            'content_loaded': self.on_content_loaded,
         }
         self.currently_showing = {}
 
@@ -144,12 +145,17 @@ class View:
     def on_resize(self):
         pass
 
-    def show_loading(self, title):
+    def show_loading(self):
-        return  # TODO: Implement this
+        title = self.book.metadata.title
+        name = self.currently_showing.name
+        self.overlay.show_loading_message(_(
+            'Loading <i>{name}</i> from <i>{title}</i>, please wait...').format(name=name, title=title))
+
+    def hide_loading(self):
+        self.overlay.hide_loading_message()
 
     def display_book(self, book):
         self.book = book
-        self.show_loading(book.metadata.title)
         self.ui.db.update_last_read_time(book)
         pos = {'replace_history':True}
         unkey = username_key(self.ui.interface_data.username)
@@ -184,6 +190,7 @@ class View:
         }
         initial_position = initial_position or {'replace_history':False}
         self.currently_showing = {'name':name, 'settings':settings, 'initial_position':initial_position, 'loading':True}
+        self.show_loading()
         spine = self.book.manifest.spine
         idx = spine.indexOf(name)
         if idx > -1:
@@ -236,3 +243,6 @@ class View:
             settings=self.currently_showing.settings,
         )
         self.encrypted_communications = True
+
+    def on_content_loaded(self):
+        self.hide_loading()

src/pyj/widgets.pyj

@@ -27,8 +27,8 @@ create_button.style = build_rule('button.calibre-push-button',
 create_button.style += build_rule('button.calibre-push-button:hover', transform='scale(1.2)')
 create_button.style += build_rule('button.calibre-push-button:active', transform='scale(2)')
 
-def create_spinner():
+def create_spinner(height, width):
-    ans = svgicon('cog')
+    ans = svgicon('cog', height, width)
     ans.classList.add('spin')
     return ans