From 459b18c97b3285c95797e0f25f2eb98373bfacd1 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 8 Mar 2017 18:05:15 +0100
Subject: [PATCH] Add the loading screen in the HTML so that it is displayed
 before JS is loaded

---
 www/code/index.html           | 10 ++++++++++
 www/common/cryptpad-common.js | 31 ++++++++++++++++---------------
 www/drive/index.html          | 10 ++++++++++
 www/pad/index.html            | 10 ++++++++++
 www/poll/index.html           | 10 ++++++++++
 www/slide/index.html          | 10 ++++++++++
 6 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/www/code/index.html b/www/code/index.html
index af6247a40..a3f943078 100644
--- a/www/code/index.html
+++ b/www/code/index.html
@@ -11,6 +11,7 @@
         data-main-favicon="/customize/main-favicon.png"
         data-alt-favicon="/customize/alt-favicon.png"
         id="favicon" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body {
@@ -45,5 +46,14 @@
     <div id="iframe-container">
         <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
     </div>
+    <div id="loading">
+        <div class="loadingContainer">
+            <img class="cryptofist" src="/customize/cryptofist_small.png" />
+            <div class="spinnerContainer">
+                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
+            </div>
+            <p data-localization="loading"></p>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 98e6221b3..8f67a542b 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -883,26 +883,27 @@ define([
         return Messages.tips[keys[rdm]];
     };
     common.addLoadingScreen = function (loadingText) {
+        var $loading, $container;
         if ($('#' + LOADING).length) {
-            $('#' + LOADING).show();
-            return;
+            $loading = $('#' + LOADING).show();
+            if (loadingText) {
+                $('#' + LOADING).find('p').text(loadingText);
+            }
+            $container = $loading.find('.loadingContainer');
+        } else {
+            var $loading = $('<div>', {id: LOADING});
+            $container = $('<div>', {'class': 'loadingContainer'});
+            $container.append('<img class="cryptofist" src="/customize/cryptofist_small.png" />');
+            var $spinner = $('<div>', {'class': 'spinnerContainer'});
+            var loadingSpinner = common.spinner($spinner).show();
+            var $text = $('<p>').text(loadingText || Messages.loading);
+            $container.append($spinner).append($text);
+            $loading.append($container);
+            $('body').append($loading);
         }
-        var $loading = $('<div>', {id: LOADING});
-        var $container = $('<div>', {'class': 'loadingContainer'});
-        $container.append('<img class="cryptofist" src="/customize/cryptofist_small.png" />');
-        var $spinner = $('<div>', {'class': 'spinnerContainer'});
-        var loadingSpinner = common.spinner($spinner).show();
-        var $text = $('<p>').text(loadingText || Messages.loading);
-        $container.append($spinner).append($text);
-        $loading.append($container);
-        $('body').append($loading);
         if (Messages.tips) {
             var $loadingTip = $('<div>', {'id': 'loadingTip'});
             var $tip = $('<span>', {'class': 'tips'}).text(getRandomTip()).appendTo($loadingTip);
-            console.log($('body').height());
-            console.log($container.height());
-            console.log($('body'));
-            console.log($container);
             $loadingTip.css({
                 'top': $('body').height()/2 + $container.height()/2 + 20 + 'px'
             });
diff --git a/www/drive/index.html b/www/drive/index.html
index 43fe2b44c..e5185dbff 100644
--- a/www/drive/index.html
+++ b/www/drive/index.html
@@ -9,6 +9,7 @@
         data-main-favicon="/customize/main-favicon.png"
         data-alt-favicon="/customize/alt-favicon.png"
         id="favicon" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/customize/main.css" />
     <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
     <style>
@@ -33,5 +34,14 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
+    <div id="loading">
+        <div class="loadingContainer">
+            <img class="cryptofist" src="/customize/cryptofist_small.png" />
+            <div class="spinnerContainer">
+                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
+            </div>
+            <p data-localization="loading"></p>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/www/pad/index.html b/www/pad/index.html
index 4e7aeba58..cab938541 100644
--- a/www/pad/index.html
+++ b/www/pad/index.html
@@ -4,6 +4,7 @@
     <title>CryptPad</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="icon" type="image/png"
         href="/customize/main-favicon.png"
         data-main-favicon="/customize/main-favicon.png"
@@ -56,5 +57,14 @@
 </head>
 <body>
     <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
+    <div id="loading">
+        <div class="loadingContainer">
+            <img class="cryptofist" src="/customize/cryptofist_small.png" />
+            <div class="spinnerContainer">
+                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
+            </div>
+            <p data-localization="loading"></p>
+        </div>
+    </div>
 </body>
 </html>
diff --git a/www/poll/index.html b/www/poll/index.html
index 87a80b078..296d6fbf5 100644
--- a/www/poll/index.html
+++ b/www/poll/index.html
@@ -143,3 +143,13 @@
         <button data-localization-title="poll_commit" id="commit"><span class="fa fa-check"></span></button>
     </div>
 </div>
+
+<div id="loading">
+    <div class="loadingContainer">
+        <img class="cryptofist" src="/customize/cryptofist_small.png" />
+        <div class="spinnerContainer">
+            <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
+        </div>
+        <p data-localization="loading"></p>
+    </div>
+</div>
diff --git a/www/slide/index.html b/www/slide/index.html
index 30dac12e8..15ccd6c6f 100644
--- a/www/slide/index.html
+++ b/www/slide/index.html
@@ -10,6 +10,7 @@
         data-main-favicon="/customize/main-favicon.png"
         data-alt-favicon="/customize/alt-favicon.png"
         id="favicon" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body {
@@ -48,5 +49,14 @@
     <div id="iframe-container">
         <iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
     </div>
+    <div id="loading">
+        <div class="loadingContainer">
+            <img class="cryptofist" src="/customize/cryptofist_small.png" />
+            <div class="spinnerContainer">
+                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
+            </div>
+            <p data-localization="loading"></p>
+        </div>
+    </div>
 </body>
 </html>