[TASK] Adjust loading animation of modal windows

Use TYPO3 spinner which is properly centered.

Releases: master, 8.7
Resolves: #83218
Change-Id: Ieec359ee0bc05ebb75724b963edaf1dc5bbab0a8
Reviewed-on: https://review.typo3.org/54929


Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Tymoteusz Motylewski <t.motylewski@gmail.com>
Tested-by: Tymoteusz Motylewski <t.motylewski@gmail.com>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>

Build/Resources/Public/Sass/component/_modal.scss

@@ -96,9 +96,13 @@ $modal-danger-border: $btn-danger-border;
     transition: margin-top 0.1s ease-in;
     border: none;
 
-    .loadmessage {
-        text-align: center;
-        color: $gray-darker;
+    .modal-loading {
+        position: absolute;
+        display: flex;
+        height: 100%;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
     }
 }
 

typo3/sysext/backend/Resources/Public/JavaScript/Modal.js

@@ -285,7 +285,9 @@ define(['jquery',
 				}
 				Modal.currentModal.trigger('modal-loaded');
 			}, 'html');
-			currentModal.find(Modal.identifiers.body).html('<p class="loadmessage"><i class="fa fa-spinner fa-spin fa-5x "></i></p>');
+			Icons.getIcon('spinner-circle', Icons.sizes.default, null, null, Icons.markupIdentifiers.inline).done(function(icon) {
+				currentModal.find(Modal.identifiers.body).html('<div class="modal-loading">' + icon + '</div>');
+			});
 		} else if (type === 'iframe') {
 			currentModal.find(Modal.identifiers.body).append(
 				$('<iframe />', { src: content, 'name': 'modal_frame', 'class': 'modal-iframe t3js-modal-iframe' })