Merge pull request #893 from iNavFlight/agh_tab_loading

Make tab loading async safe and add a small animation

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 {
@@ -2131,4 +2147,4 @@ select {
 
 .subtab__content--current {
     display: block;
-}
+}

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() {
@@ -670,4 +670,4 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
 
 TABS.configuration.cleanup = function (callback) {
     if (callback) callback();
-};
+};

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