From 41f1b7042ac87ba83e171e0a42416a836f67bd42 Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Fri, 1 Jun 2018 11:12:36 +0100
Subject: [PATCH] Add message for when display is delayed by CSS caching

---
 www/index.html | 5 ++++-
 www/js/app.js  | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/www/index.html b/www/index.html
index 16eb100a4..9e3aabed1 100644
--- a/www/index.html
+++ b/www/index.html
@@ -255,7 +255,10 @@ <h3>Expert settings</h3>
                     </div>
                 </div>
                 <div id="readingArticle" style="display: none;" class="container">
-                    Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" alt="Please wait..." />
+                    <p>Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" alt="Please wait..." /></p>
+                </div>
+                <div id="cachingCSS" style="display: none;" class="container">
+                    <p>Caching styles to speed up future page display...</p>
                 </div>
                 <iframe id="articleContent" class="articleIFrame" src="article.html"></iframe>
             </article>
diff --git a/www/js/app.js b/www/js/app.js
index c08c33436..2e45266d1 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -966,6 +966,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
                     uiUtil.replaceCSSLinkWithInlineCSS(link, cssContent);
                     cssFulfilled++;
                 } else {
+                    $('#cachingCSS').show();
                     selectedArchive.getDirEntryByTitle(title)
                     .then(function (dirEntry) {
                         return selectedArchive.readUtf8File(dirEntry,
@@ -990,6 +991,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
             // until all CSS content is available [kiwix-js #381]
             function renderIfCSSFulfilled() {
                 if (cssFulfilled >= cssCount) {
+                    $('#cachingCSS').hide();
                     $('#readingArticle').hide();
                     $('#articleContent').show();
                 }