From fb7cbe0c8f3a1c9c91f31d606dbb009901576d2e Mon Sep 17 00:00:00 2001
From: cTn <ctndesigner@gmail.com>
Date: Sat, 12 Jul 2014 12:03:13 +0200
Subject: [PATCH] use sync approach for displaying loading screen (faster then
 async)

---
 main.css          | 20 ++++++++++++-
 main.html         |  6 +++-
 main.js           | 72 ++++++++++++++++++++++++-----------------------
 tabs/loading.css  | 16 -----------
 tabs/loading.html |  3 --
 5 files changed, 61 insertions(+), 56 deletions(-)
 delete mode 100644 tabs/loading.css
 delete mode 100644 tabs/loading.html

diff --git a/main.css b/main.css
index ed671903..00ea28fa 100644
--- a/main.css
+++ b/main.css
@@ -282,7 +282,6 @@ input[type="number"]::-webkit-inner-spin-button {
     border-top: 1px solid #7d7d79;
     background-color: #bfbeb5;
 }
-
     #status-bar div {
         float: left;
 
@@ -291,6 +290,25 @@ input[type="number"]::-webkit-inner-spin-button {
 
         border-right: 1px solid #7d7d79;
     }
+#cache {
+    display: none;
+}
+.data-loading {
+    width: 100%;
+    height: 100%;
+
+    background-image: url('../images/loading-bars.svg');
+    background-repeat: no-repeat;
+    background-position: center 45%;
+}
+
+.data-loading p {
+    position: relative;
+    top: calc(45% + 45px);
+
+    text-align: center;
+    font-weight: bold;
+}
 
 @font-face {
     font-family: 'icons';
diff --git a/main.html b/main.html
index a44c5c9a..57a9f141 100644
--- a/main.html
+++ b/main.html
@@ -18,7 +18,6 @@
         <link type="text/css" rel="stylesheet" href="./tabs/cli.css" media="all" />
         <link type="text/css" rel="stylesheet" href="./tabs/logging.css" media="all" />
         <link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
-        <link type="text/css" rel="stylesheet" href="./tabs/loading.css" media="all" />
 
         <script type="text/javascript" src="./js/libraries/google-analytics-bundle.js"></script>
         <script type="text/javascript" src="./js/libraries/jquery-2.1.1.min.js"></script>
@@ -131,5 +130,10 @@
                 <span i18n="statusbar_cycle_time"></span> <span class="cycle-time">0</span>
             </div>
         </div>
+        <div id="cache">
+            <div class="data-loading">
+                <p>Waiting for data ...</p>
+            </div>
+        </div>
     </body>
 </html>
diff --git a/main.js b/main.js
index 49e6cc38..fca91e19 100644
--- a/main.js
+++ b/main.js
@@ -70,42 +70,44 @@ $(document).ready(function() {
                 $(self).parent().addClass('active');
 
                 // detach listeners and remove element data
-                $('#content').empty();
+                var content = $('#content');
+                content.empty();
 
-                $('#content').load("./tabs/loading.html", function() {
-                    switch (tab) {
-                        case 'tab_initial_setup':
-                            tabs.initial_setup.initialize(content_ready);
-                            break;
-                        case 'tab_pid_tuning':
-                            tabs.pid_tuning.initialize(content_ready);
-                            break;
-                        case 'tab_receiver':
-                            tabs.receiver.initialize(content_ready);
-                            break;
-                        case 'tab_auxiliary_configuration':
-                            tabs.auxiliary_configuration.initialize(content_ready);
-                            break;
-                        case 'tab_servos':
-                            tabs.servos.initialize(content_ready);
-                            break;
-                        case 'tab_gps':
-                            tabs.gps.initialize(content_ready);
-                            break;
-                        case 'tab_motor_outputs':
-                            tabs.motor_outputs.initialize(content_ready);
-                            break;
-                        case 'tab_sensors':
-                            tabs.sensors.initialize(content_ready);
-                            break;
-                        case 'tab_cli':
-                            tabs.cli.initialize(content_ready);
-                            break;
-                        case 'tab_logging':
-                            tabs.logging.initialize(content_ready);
-                            break;
-                    }
-                });
+                // display loading screen
+                $('#cache .data-loading').clone().appendTo(content);
+
+                switch (tab) {
+                    case 'tab_initial_setup':
+                        tabs.initial_setup.initialize(content_ready);
+                        break;
+                    case 'tab_pid_tuning':
+                        tabs.pid_tuning.initialize(content_ready);
+                        break;
+                    case 'tab_receiver':
+                        tabs.receiver.initialize(content_ready);
+                        break;
+                    case 'tab_auxiliary_configuration':
+                        tabs.auxiliary_configuration.initialize(content_ready);
+                        break;
+                    case 'tab_servos':
+                        tabs.servos.initialize(content_ready);
+                        break;
+                    case 'tab_gps':
+                        tabs.gps.initialize(content_ready);
+                        break;
+                    case 'tab_motor_outputs':
+                        tabs.motor_outputs.initialize(content_ready);
+                        break;
+                    case 'tab_sensors':
+                        tabs.sensors.initialize(content_ready);
+                        break;
+                    case 'tab_cli':
+                        tabs.cli.initialize(content_ready);
+                        break;
+                    case 'tab_logging':
+                        tabs.logging.initialize(content_ready);
+                        break;
+                }
 
                 function content_ready() {
                     GUI.tab_switch_in_progress = false;
diff --git a/tabs/loading.css b/tabs/loading.css
deleted file mode 100644
index 192af8ce..00000000
--- a/tabs/loading.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.tab-loading {
-    width: 100%;
-    height: 100%;
-
-    background-image: url('../images/loading-bars.svg');
-    background-repeat: no-repeat;
-    background-position: center 45%;
-}
-
-.tab-loading p {
-    position: relative;
-    top: calc(45% + 45px);
-
-    text-align: center;
-    font-weight: bold;
-}
\ No newline at end of file
diff --git a/tabs/loading.html b/tabs/loading.html
deleted file mode 100644
index 10ada189..00000000
--- a/tabs/loading.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="tab-loading">
-    <p>Waiting for data ...</p>
-</div>
\ No newline at end of file