Support loading spinner on generic popup dialog

Empty the popup container and show loading spinner
on-load hide the spinner and show the content

include/staff/footer.inc.php

@@ -19,7 +19,11 @@ if(is_object($thisstaff) && $thisstaff->isStaff()) { ?>
     <i class="icon-spinner icon-spin icon-3x pull-left icon-light"></i>
     <h1><?php echo __('Loading ...');?></h1>
 </div>
-<div class="dialog" style="display:none;width:650px;" id="popup">
+<div class="dialog draggable" style="display:none;width:650px;" id="popup">
+    <div id="popup-loading">
+        <h1 style="margin-bottom: 20px;"><i class="icon-spinner icon-spin icon-large"></i>
+        <?php echo __('Loading ...');?></h1>
+    </div>
     <div class="body"></div>
 </div>
 <div style="display:none;" class="dialog" id="alert">

scp/js/scp.js

@@ -530,12 +530,19 @@ $.dialog = function (url, codes, cb, options) {
     if (codes && !$.isArray(codes))
         codes = [codes];
 
-    $('.dialog#popup .body').load(url, function () {
-        $('#overlay').show();
-        $('.dialog#popup').show({
+    var $popup = $('.dialog#popup');
+
+    $('#overlay').show();
+    $('div.body', $popup).empty().hide();
+    $('div#popup-loading', $popup).show();
+    $popup.show();
+    $('div.body', $popup).load(url, function () {
+        $('div#popup-loading', $popup).hide();
+        $('div.body', $popup).show({
             duration: 0,
             complete: function() { if (options.onshow) options.onshow(); }
         });
+        $popup.show();
         $(document).off('.dialog');
         $(document).on('submit.dialog', '.dialog#popup form', function(e) {
             e.preventDefault();