[BUGFIX] Change the order of the AJAX Request for image cropping

It ensures that the request will not be overwritten by the spinning icon
on fast servers.

Before the changes, the image cropping tool triggered a Console Error
"Uncaught TypeError: Cannot read property 'cropArea' of undefined at
ImageManipulation.init (ImageManipulation.js)."

Resolves: #84499
Releases: master, 8.7
Change-Id: Ic2208ba43d0976a1ba9674d68e5d861e89619d1a
Reviewed-on: https://review.typo3.org/56469
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>

typo3/sysext/backend/Resources/Private/TypeScript/Modal.ts

@@ -341,20 +341,27 @@ class Modal {
     });
 
     if (configuration.type === 'ajax') {
-      $.get(
-        <string>configuration.content,
-        (response: string): void => {
-          this.currentModal.find(configuration.ajaxTarget ? configuration.ajaxTarget : Identifiers.body).empty().append(response);
-          if (configuration.ajaxCallback) {
-            configuration.ajaxCallback();
-          }
-          this.currentModal.trigger('modal-loaded');
-        },
-        'html'
-      );
-      Icons.getIcon('spinner-circle', Icons.sizes.default, null, null, Icons.markupIdentifiers.inline).done((icon: string): void => {
-        currentModal.find(Identifiers.body).html('<div class="modal-loading">' + icon + '</div>');
-      });
+      const contentTarget = configuration.ajaxTarget ? configuration.ajaxTarget : Identifiers.body;
+      const $loaderTarget = currentModal.find(contentTarget);
+      if (!$loaderTarget.hasClass('modal-content-loaded')) {
+        Icons.getIcon('spinner-circle', Icons.sizes.default, null, null, Icons.markupIdentifiers.inline).done((icon: string): void => {
+          $loaderTarget.html('<div class="modal-loading">' + icon + '</div>');
+          $.get(
+              <string>configuration.content,
+              (response: string): void => {
+                this.currentModal.find(contentTarget)
+                    .addClass('modal-content-loaded')
+                    .empty()
+                    .append(response);
+                if (configuration.ajaxCallback) {
+                  configuration.ajaxCallback();
+                }
+                this.currentModal.trigger('modal-loaded');
+              },
+              'html'
+          );
+        });
+      }
     } else if (configuration.type === 'iframe') {
       currentModal.find(Identifiers.body).append(
         $('<iframe />', {