use sync approach for displaying loading screen (faster then async)

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';

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>

main.js

@@ -70,9 +70,12 @@ $(document).ready(function() {
                 $(self).parent().addClass('active');
 
                 // detach listeners and remove element data
-                $('#content').empty();
+                var content = $('#content');
+                content.empty();
+
+                // display loading screen
+                $('#cache .data-loading').clone().appendTo(content);
 
-                $('#content').load("./tabs/loading.html", function() {
                 switch (tab) {
                     case 'tab_initial_setup':
                         tabs.initial_setup.initialize(content_ready);
@@ -105,7 +108,6 @@ $(document).ready(function() {
                         tabs.logging.initialize(content_ready);
                         break;
                 }
-                });
 
                 function content_ready() {
                     GUI.tab_switch_in_progress = false;

tabs/loading.css

@@ -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;
-}

tabs/loading.html

@@ -1,3 +0,0 @@
-<div class="tab-loading">
-    <p>Waiting for data ...</p>
-</div>