From d175ad7278544e6c6960ade709a3312e78d4b6a0 Mon Sep 17 00:00:00 2001
From: Justin Beaty <51970393+justinbeaty@users.noreply.github.com>
Date: Wed, 24 Aug 2022 00:22:18 -0700
Subject: [PATCH] Addendum to #2426 - Adminhtml loader (#2475)

---
 .../template/catalog/category/edit.phtml      |  5 +-
 .../importexport/import/form/before.phtml     | 14 ++---
 .../newsletter/preview/iframeswitcher.phtml   | 21 ++-----
 .../default/default/template/page.phtml       |  4 +-
 .../default/default/template/popup.phtml      |  5 +-
 js/mage/adminhtml/loader.js                   | 55 +++++++++++--------
 js/mage/directpost.js                         | 10 +---
 skin/adminhtml/default/default/boxes.css      |  4 ++
 8 files changed, 56 insertions(+), 62 deletions(-)

diff --git a/app/design/adminhtml/default/default/template/catalog/category/edit.phtml b/app/design/adminhtml/default/default/template/catalog/category/edit.phtml
index 0d566ce73b1..67073cfdd10 100644
--- a/app/design/adminhtml/default/default/template/catalog/category/edit.phtml
+++ b/app/design/adminhtml/default/default/template/catalog/category/edit.phtml
@@ -183,10 +183,7 @@
 
     function displayLoadingMask()
     {
-       var loaderArea = $$('#html-body .wrapper')[0]; // Blocks all page
-        Position.clone($(loaderArea), $('loading-mask'), {offsetLeft:-2});
-        toggleSelectsUnderBlock($('loading-mask'), false);
-        Element.show('loading-mask');
+        showLoader();
     }
 //]]>
 </script>
diff --git a/app/design/adminhtml/default/default/template/importexport/import/form/before.phtml b/app/design/adminhtml/default/default/template/importexport/import/form/before.phtml
index 3629bef3c14..5595b0ac8b2 100644
--- a/app/design/adminhtml/default/default/template/importexport/import/form/before.phtml
+++ b/app/design/adminhtml/default/default/template/importexport/import/form/before.phtml
@@ -43,16 +43,14 @@
                 });
             }
 
-            // show mask, temporary set new target and submit form
-            var loadingMask = $('loading-mask');
+            // show mask
+            showLoader();
+
+            // temporary set new target and submit form
             var formElem    = $(this.formId);
             var oldTarget   = formElem.target;
             var oldAction   = formElem.action;
 
-            Element.clonePosition(loadingMask, $$('#html-body .wrapper')[0], {offsetLeft:-2})
-            toggleSelectsUnderBlock(loadingMask, false);
-            loadingMask.show();
-            setLoaderPosition();
             formElem.target = this.ifrElemName;
 
             if (newActionUrl) {
@@ -74,10 +72,8 @@
      */
     varienForm.prototype.postToFrameComplete = function(response)
     {
-        var loadingMask = $('loading-mask');
         $(this.ifrElemName).remove();
-        toggleSelectsUnderBlock(loadingMask, true);
-        loadingMask.hide();
+        hideLoader();
         this.postToFrameProcessResponse(response);
     };
 
diff --git a/app/design/adminhtml/default/default/template/newsletter/preview/iframeswitcher.phtml b/app/design/adminhtml/default/default/template/newsletter/preview/iframeswitcher.phtml
index 6894bcf5fe3..4c4af5db5d9 100644
--- a/app/design/adminhtml/default/default/template/newsletter/preview/iframeswitcher.phtml
+++ b/app/design/adminhtml/default/default/template/newsletter/preview/iframeswitcher.phtml
@@ -43,13 +43,15 @@
     <?php echo $this->getChildHtml('preview_form'); ?>
 </div>
 <div id="loading-mask" style="display:none">
-    <p class="loader" id="loading_mask_loader"><img src="<?php echo $this->getSkinUrl('images/ajax-loader-tr.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('adminhtml')->__('Loading...')) ?>"/><br/><?php echo Mage::helper('adminhtml')->__('Please wait...') ?></p>
+    <div class="backdrop"></div>
+    <p class="loader" id="loading_mask_loader">
+        <img src="<?php echo $this->getSkinUrl('images/ajax-loader-tr.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('adminhtml')->__('Loading...')) ?>"/><br/><?php echo Mage::helper('adminhtml')->__('Please wait...') ?>
+    </p>
 </div>
 
 <script type="text/javascript">
 //<![CDATA[
 var previewForm = $('preview_form');
-var loadingMask = $('loading-mask');
 var previewIframe = $('preview_iframe');
 
 function preview() {
@@ -59,22 +61,11 @@ function preview() {
 }
 
 function blockPreview() {
-    var cumulativeOffset = $('preview').cumulativeOffset();
-    $('loading-mask').setStyle({
-        top:  ( cumulativeOffset.top ) + 'px',
-        left: ( cumulativeOffset.left ) + 'px',
-        width: $('preview').getWidth() + 'px',
-        height: $('preview').getHeight() + 'px'
-    });
-
-    toggleSelectsUnderBlock($('loading-mask'), false);
-    Element.show('loading-mask');
-    setLoaderPosition();
+    showLoader($('preview'));
 }
 
 function unBlockPreview() {
-    toggleSelectsUnderBlock(loadingMask, true);
-    Element.hide(loadingMask);
+    hideLoader();
 }
 
 Event.observe(window, 'load', preview);
diff --git a/app/design/adminhtml/default/default/template/page.phtml b/app/design/adminhtml/default/default/template/page.phtml
index 0871bcba3dc..c2371330061 100644
--- a/app/design/adminhtml/default/default/template/page.phtml
+++ b/app/design/adminhtml/default/default/template/page.phtml
@@ -76,8 +76,8 @@
     <?php echo $this->getChildHtml('js') ?>
     <?php echo $this->getChildHtml('profiler') ?>
 <div id="loading-mask" style="display:none">
-    <div class="backdrop" style="display:none"></div>
-    <p class="loader" id="loading_mask_loader" style="display:none">
+    <div class="backdrop"></div>
+    <p class="loader" id="loading_mask_loader">
         <img src="<?php echo $this->getSkinUrl('images/ajax-loader-tr.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('adminhtml')->__('Loading...')) ?>"/><br/><?php echo Mage::helper('adminhtml')->__('Please wait...') ?>
     </p>
 </div>
diff --git a/app/design/adminhtml/default/default/template/popup.phtml b/app/design/adminhtml/default/default/template/popup.phtml
index 9790bdcc876..4540c742cb7 100644
--- a/app/design/adminhtml/default/default/template/popup.phtml
+++ b/app/design/adminhtml/default/default/template/popup.phtml
@@ -66,7 +66,10 @@
     <?php echo $this->getChildHtml('js') ?>
     <?php echo $this->getChildHtml('profiler') ?>
     <div id="loading-mask" style="display:none;">
-        <p class="loader" id="loading_mask_loader"><img src="<?php echo $this->getSkinUrl('images/ajax-loader-tr.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('adminhtml')->__('Loading...')) ?>" /><br /><?php echo Mage::helper('adminhtml')->__('Please wait...') ?></p>
+        <div class="backdrop"></div>
+        <p class="loader" id="loading_mask_loader">
+            <img src="<?php echo $this->getSkinUrl('images/ajax-loader-tr.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('adminhtml')->__('Loading...')) ?>"/><br/><?php echo Mage::helper('adminhtml')->__('Please wait...') ?>
+        </p>
     </div>
 </div>
 <?php echo $this->getChildHtml('before_body_end') ?>
diff --git a/js/mage/adminhtml/loader.js b/js/mage/adminhtml/loader.js
index d6d5d835d54..a01eba1c427 100644
--- a/js/mage/adminhtml/loader.js
+++ b/js/mage/adminhtml/loader.js
@@ -187,37 +187,44 @@ varienLoaderHandler.handler = {
         if(request.options.loaderArea===false){
             return;
         }
-
-        request.options.loaderArea = $$('#html-body .wrapper')[0]; // Blocks all page
-
-        if(request && request.options.loaderArea){
-            Element.clonePosition($('loading-mask'), $(request.options.loaderArea), {offsetLeft:-2});
-            toggleSelectsUnderBlock($('loading-mask'), false);
-            Element.show('loading-mask');
-            Element.childElements('loading-mask').invoke('hide');
-            setLoaderPosition();
-            if(this.timeout) {
-                clearTimeout(this.timeout);
-            }
-            this.timeout = setTimeout(function() {
-                Element.childElements('loading-mask').invoke('show');
-            }, typeof window.LOADING_TIMEOUT === 'undefined' ? 200 : window.LOADING_TIMEOUT);
-        }
+        showLoader();
     },
-
     onComplete: function(transport) {
         if(Ajax.activeRequestCount == 0) {
-            toggleSelectsUnderBlock($('loading-mask'), true);
-            Element.hide('loading-mask');
-            Element.childElements('loading-mask').invoke('hide');
-            if(this.timeout) {
-                clearTimeout(this.timeout);
-                this.timeout = null;
-            }
+            hideLoader();
         }
     }
 };
 
+var loaderTimeout = null;
+
+function showLoader(loaderArea) {
+    if($(loaderArea) === undefined) {
+        loaderArea = $$('#html-body .wrapper')[0]; // Blocks all page
+    }
+    var loadingMask = $('loading-mask');
+    if(Element.visible(loadingMask)) {
+        return;
+    }
+    Element.clonePosition(loadingMask, loaderArea, {offsetLeft:-2});
+    toggleSelectsUnderBlock(loadingMask, false);
+    Element.show(loadingMask);
+    Element.childElements(loadingMask).invoke('hide');
+    setLoaderPosition();
+    loaderTimeout = setTimeout(function() {
+        Element.childElements(loadingMask).invoke('show');
+    }, typeof window.LOADING_TIMEOUT === 'undefined' ? 200 : window.LOADING_TIMEOUT);
+}
+
+function hideLoader() {
+    toggleSelectsUnderBlock($('loading-mask'), true);
+    Element.hide('loading-mask');
+    if(loaderTimeout) {
+        clearTimeout(loaderTimeout);
+        loaderTimeout = null;
+    }
+}
+
 /**
  * @todo need calculate middle of visible area and scroll bind
  */
diff --git a/js/mage/directpost.js b/js/mage/directpost.js
index 316570d4507..9a37241c168 100644
--- a/js/mage/directpost.js
+++ b/js/mage/directpost.js
@@ -116,8 +116,7 @@ directPost.prototype = {
                             this.returnQuote();
                         } else {
                             this.changeInputOptions('disabled', false);
-                            toggleSelectsUnderBlock($('loading-mask'), true);
-                            $('loading-mask').hide();
+                            hideLoader();
                             enableElements('save');
                         }
                     }
@@ -164,8 +163,7 @@ directPost.prototype = {
                     case 'sales_order_edit':
                     case 'sales_order_create':
                         this.changeInputOptions('disabled', false);
-                        toggleSelectsUnderBlock($('loading-mask'), true);
-                        $('loading-mask').hide();
+                        hideLoader();
                         enableElements('save');
                         break;
                 }
@@ -252,9 +250,7 @@ directPost.prototype = {
             });
             this.hasError = false;
             if (paymentMethodEl.value == this.code) {
-                toggleSelectsUnderBlock($('loading-mask'), false);
-                $('loading-mask').show();
-                setLoaderPosition();
+                showLoader();
                 this.changeInputOptions('disabled', 'disabled');
                 this.paymentRequestSent = true;
                 this.orderRequestSent = true;
diff --git a/skin/adminhtml/default/default/boxes.css b/skin/adminhtml/default/default/boxes.css
index 8bee13c9425..bef70f0ca24 100644
--- a/skin/adminhtml/default/default/boxes.css
+++ b/skin/adminhtml/default/default/boxes.css
@@ -74,6 +74,10 @@
 #loading-mask {
     background:url(images/blank.gif) repeat;
     position:absolute;
+    top:0;
+    right:0;
+    bottom:0;
+    left:0;
     color:#d85909;
     font-size:1.1em;
     font-weight:bold;