Make tab loading async safe and add a small animation

Tab loading was relying on replacing the contents of '#content'
with the loading indicator, then replacing it with the loading tab
content and blocking rendering until the tab was ready by not
yielding. This is problematic for tabs that load some data
asynchronously, like PID and OSD.

Instead, put the loading indicator in front of everything else
and load new content inside '#content' next to the loading indicator
(but without showing it). Once the content and data are fully loaded
we fade out the loading indicator with a 0.4s long animation and
then we remove. This works for both synchronous and asynchonous
loading of tabs.

js/gui.js

@@ -128,7 +128,7 @@ GUI_control.prototype.switchery = function() {
 
 
 GUI_control.prototype.content_ready = function (callback) {
-
+    const content = $('#content').removeClass('loading');
     $('.togglesmall').each(function(index, elem) {
         var switchery = new Switchery(elem, {
           size: 'small',
@@ -190,7 +190,13 @@ GUI_control.prototype.content_ready = function (callback) {
         });
     });
 
-    if (callback) callback();
+    const duration = content.data('empty') ? 0 : 400;
+    $('#content .data-loading').fadeOut(duration, function() {
+        $(this).remove();
+    });
+    if (callback) {
+        callback();
+    }
 };
 
 GUI_control.prototype.updateStatusBar = function() {
@@ -243,5 +249,15 @@ GUI_control.prototype.simpleBind = function () {
     });
 };
 
+GUI_control.prototype.load = function(rel, callback) {
+    const content = $('#content').addClass('loading');
+    $.get(rel, function(data) {
+        $(data).appendTo(content);
+        if (callback) {
+            callback();
+        }
+    });
+}
+
 // initialize object into GUI variable
 var GUI = new GUI_control();

main.css

@@ -985,6 +985,14 @@ li.active .ic_mixer {
     /* Cause the height to shrink to contain its floated contents while log is open */
 }
 
+#content.loading {
+    overflow-y: hidden;
+}
+
+#content.loading > * {
+    opacity: 0;
+}
+
 #status-bar {
     position: fixed;
     bottom: 0;
@@ -1015,9 +1023,17 @@ li.active .ic_mixer {
 }
 
 .data-loading {
+    z-index: 10000;
+    position: absolute;
+    top: 0;
     width: 100%;
     height: 100%;
     background: url('../images/loading-bars.svg') no-repeat center 45%;
+    background-color: #FFF;
+}
+
+#content.loading .data-loading {
+    opacity: 1;
 }
 
 .data-loading p {

main.js

@@ -171,6 +171,7 @@ $(document).ready(function () {
 
                 // detach listeners and remove element data
                 var content = $('#content');
+                content.data('empty', !!content.is(':empty'));
                 content.empty();
 
                 // display loading screen

tabs/adjustments.js

@@ -21,7 +21,7 @@ TABS.adjustments.initialize = function (callback) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/adjustments.html", process_html);
+        GUI.load("./tabs/adjustments.html", process_html);
     }
 
     MSP.send_message(MSPCodes.MSP_BOXNAMES, false, false, get_adjustment_ranges);

tabs/advanced_tuning.js

@@ -33,7 +33,7 @@ TABS.advanced_tuning.initialize = function (callback) {
     saveChainer.setExitPoint(reboot);
 
     function loadHtml() {
-        $('#content').load("./tabs/advanced_tuning.html", processHtml);
+        GUI.load("./tabs/advanced_tuning.html", processHtml);
     }
 
     function reboot() {

tabs/auxiliary.js

@@ -28,7 +28,7 @@ TABS.auxiliary.initialize = function (callback) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/auxiliary.html", process_html);
+        GUI.load("./tabs/auxiliary.html", process_html);
     }
 
     MSP.send_message(MSPCodes.MSP_BOXNAMES, false, false, get_mode_ranges);

tabs/calibration.js

@@ -84,7 +84,7 @@ TABS.calibration.initialize = function (callback) {
     }
 
     function loadHtml() {
-        $('#content').load("./tabs/calibration.html", processHtml);
+        GUI.load("./tabs/calibration.html", processHtml);
     }
 
     function updateCalibrationSteps() {

tabs/cli.js

@@ -142,7 +142,7 @@ TABS.cli.initialize = function (callback) {
         Promise.reduce(outputArray, sendLinesWithDelay(outputArray), 0);
     }
 
-    $('#content').load("./tabs/cli.html", function () {
+    GUI.load("./tabs/cli.html", function () {
         // translate to user-selected language
         localize();
 

tabs/configuration.js

@@ -87,7 +87,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/configuration.html", process_html);
+        GUI.load("./tabs/configuration.html", process_html);
     }
 
     function process_html() {

tabs/failsafe.js

@@ -34,7 +34,7 @@ TABS.failsafe.initialize = function (callback, scrollPosition) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/failsafe.html", process_html);
+        GUI.load("./tabs/failsafe.html", process_html);
     }
 
     load_rx_config();

tabs/firmware_flasher.js

@@ -23,7 +23,7 @@ TABS.firmware_flasher.initialize = function (callback) {
     var intel_hex = false, // standard intel hex in string format
         parsed_hex = false; // parsed raw hex in array format
 
-    $('#content').load("./tabs/firmware_flasher.html", function () {
+    GUI.load("./tabs/firmware_flasher.html", function () {
         // translate to user-selected language
         localize();
 

tabs/gps.js

@@ -9,7 +9,7 @@ TABS.gps.initialize = function (callback) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/gps.html", process_html);
+        GUI.load("./tabs/gps.html", process_html);
     }
 
     load_html();

tabs/landing.js

@@ -9,7 +9,7 @@ TABS.landing.initialize = function (callback) {
         googleAnalytics.sendAppView('Landing');
     }
 
-    $('#content').load("./tabs/landing.html", function () {
+    GUI.load("./tabs/landing.html", function () {
         localize();
 
         $('.tab-landing a').click(function () {

tabs/led_strip.js

@@ -48,7 +48,7 @@ TABS.led_strip.initialize = function (callback, scrollPosition) {
 
 
     function load_html() {
-        $('#content').load("./tabs/led_strip.html", process_html);
+        GUI.load("./tabs/led_strip.html", process_html);
     }
 
     load_led_config();

tabs/logging.js

@@ -20,7 +20,7 @@ TABS.logging.initialize = function (callback) {
         }
 
         var load_html = function () {
-            $('#content').load("./tabs/logging.html", process_html);
+            GUI.load("./tabs/logging.html", process_html);
         }
 
         MSP.send_message(MSPCodes.MSP_RC, false, false, get_motor_data);

tabs/mission_control.js

@@ -61,7 +61,7 @@ TABS.mission_control.initialize = function (callback) {
     }
 
     function loadHtml() {
-        $('#content').load("./tabs/mission_control.html", process_html);
+        GUI.load("./tabs/mission_control.html", process_html);
     }
 
     function process_html() {

tabs/mixer.js

@@ -54,7 +54,7 @@ TABS.mixer.initialize = function (callback, scrollPosition) {
     }
 
     function loadHtml() {
-        $('#content').load("./tabs/mixer.html", processHtml);
+        GUI.load("./tabs/mixer.html", processHtml);
     }
 
     function renderOutputTable() {

tabs/modes.js

@@ -24,7 +24,7 @@ TABS.modes.initialize = function (callback) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/modes.html", process_html);
+        GUI.load("./tabs/modes.html", process_html);
     }
 
     MSP.send_message(MSPCodes.MSP_BOXNAMES, false, false, get_active_box_data);

tabs/motors.js

@@ -55,7 +55,7 @@ TABS.motors.initialize = function (callback) {
     });
 
     function load_html() {
-        $('#content').load("./tabs/motors.html", onLoad);
+        GUI.load("./tabs/motors.html", onLoad);
     }
 
     function onLoad() {

tabs/onboard_logging.js

@@ -55,7 +55,7 @@ TABS.onboard_logging.initialize = function (callback) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/onboard_logging.html", function() {
+        GUI.load("./tabs/onboard_logging.html", function() {
             // translate to user-selected language
             localize();
 

tabs/osd.js

@@ -2344,7 +2344,7 @@ TABS.osd.initialize = function (callback) {
         GUI.active_tab = 'osd';
     }
 
-    $('#content').load("./tabs/osd.html", Settings.processHtml(function () {
+    GUI.load("./tabs/osd.html", Settings.processHtml(function () {
         // translate to user-selected language
         localize();
 

tabs/pid_tuning.js

@@ -29,7 +29,7 @@ TABS.pid_tuning.initialize = function (callback) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/pid_tuning.html", Settings.processHtml(process_html));
+        GUI.load("./tabs/pid_tuning.html", Settings.processHtml(process_html));
     }
 
     function pid_and_rc_to_form() {

tabs/ports.js

@@ -165,7 +165,7 @@ TABS.ports.initialize = function (callback) {
         MSP.send_message(MSPCodes.MSP2_CF_SERIAL_CONFIG, false, false, on_configuration_loaded_handler);
 
         function on_configuration_loaded_handler() {
-            $('#content').load("./tabs/ports.html", on_tab_loaded_handler);
+            GUI.load("./tabs/ports.html", on_tab_loaded_handler);
         }
     }
 

tabs/profiles.js

@@ -659,7 +659,7 @@ TABS.profiles.initialize = function (callback, scrollPosition) {
     saveChainer.setExitPoint(reboot);
 
     function loadHtml() {
-        $('#content').load("./tabs/profiles.html", processHtml);
+        GUI.load("./tabs/profiles.html", processHtml);
     }
 
     function reboot() {

tabs/receiver.js

@@ -30,7 +30,7 @@ TABS.receiver.initialize = function (callback) {
     loadChainer.execute();
 
     function load_html() {
-        $('#content').load("./tabs/receiver.html", process_html);
+        GUI.load("./tabs/receiver.html", process_html);
     }
 
     function drawRollPitchExpo() {

tabs/sensors.js

@@ -198,7 +198,7 @@ TABS.sensors.initialize = function (callback) {
         }
     }
 
-    $('#content').load("./tabs/sensors.html", function load_html() {
+    GUI.load("./tabs/sensors.html", function load_html() {
         // translate to user-selected language
         localize();
 

tabs/setup.js

@@ -27,7 +27,7 @@ TABS.setup.initialize = function (callback) {
     loadChainer.execute();
 
     function load_html() {
-        $('#content').load("./tabs/setup.html", process_html);
+        GUI.load("./tabs/setup.html", process_html);
     }
 
     function process_html() {

tabs/transponder.js

@@ -21,7 +21,7 @@ TABS.transponder.initialize = function (callback, scrollPosition) {
     }
 
     function load_html() {
-        $('#content').load("./tabs/transponder.html", process_html);
+        GUI.load("./tabs/transponder.html", process_html);
     }
 
     // get the transponder data and a flag to see if transponder support is enabled on the FC