Issue #2207695 by Manuel Garcia, LewisNyman, pakmanlh, mitsuroseba, Sam152:...

Issue #2207695 by Manuel Garcia, LewisNyman, pakmanlh, mitsuroseba, Sam152: Expand the throbber API to include a 'full screen' option.

core/misc/ajax.js

@@ -467,6 +467,10 @@
       }
       $(this.element).after(this.progress.element);
     }
+    else if (this.progress.type === 'fullscreen') {
+      this.progress.element = $('<div class="ajax-progress ajax-progress-fullscreen">&nbsp;</div>');
+      $('body').after(this.progress.element);
+    }
   };
 
   /**

core/modules/system/css/system.module.css

@@ -253,6 +253,24 @@ tr .ajax-progress-throbber .throbber {
   width: 16em;
 }
 
+/* Full screen  throbber */
+.ajax-progress-fullscreen {
+  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
+  left: 49%;
+  position: fixed;
+  top: 48.5%;
+  z-index: 1000;
+  background-color: #232323;
+  background-image: url("../../../misc/loading-small.gif");
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 7px;
+  height: 24px;
+  opacity: 0.9;
+  padding: 4px;
+  width: 24px;
+}
+
 /**
  * Inline items.
  */

core/modules/views/js/ajax_view.js

@@ -56,7 +56,7 @@
       setClick: true,
       event: 'click',
       selector: selector,
-      progress: { type: 'throbber' }
+      progress: { type: 'fullscreen' }
     };
 
     this.settings = settings;

core/modules/views_ui/css/views_ui.admin.css

@@ -293,36 +293,6 @@ html.js span.js-only {
 
 /* @end */
 
-/* @group AJAX throbber */
-
-/* Base Page */
-#views-ui-list-page .ajax-progress-throbber,
-.views-admin .ajax-progress-throbber {
-  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
-  left: 49%;
-  position: fixed;
-  top: 48.5%;
-  z-index: 1000;
-}
-#views-ui-list-page .ajax-progress-throbber .message,
-.views-admin .ajax-progress-throbber .message {
-  display: none;
-}
-
-/* Modal */
-#views-ajax-popup .ajax-progress-throbber {
-  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
-  left: 49%;
-  position: fixed;
-  top: 48.5%;
-  z-index: 1000;
-}
-#views-ajax-popup .ajax-progress-throbber .message {
-  display: none;
-}
-
-/* @end */
-
 .js .views-edit-view .dropbutton-wrapper {
   width: auto;
 }

core/modules/views_ui/css/views_ui.admin.theme.css

@@ -1087,27 +1087,6 @@ td.group-title {
 
 /* @end */
 
-/* @group AJAX */
-
-/* Hide the drupal system throbber image */
-.ajax-progress .throbber {
-  display: none;
-}
-
-.ajax-progress-throbber {
-  background-color: #232323;
-  background-image: url(../images/loading-small.gif);
-  background-position: center center;
-  background-repeat: no-repeat;
-  border-radius: 7px;
-  height: 24px;
-  opacity: 0.9;
-  padding: 4px;
-  width: 24px;
-}
-
-/* @end */
-
 /* @group Drupal
  *
  * Overrides to Drupal system CSS

core/modules/views_ui/js/ajax.js

@@ -79,7 +79,7 @@
     attach: function (context, settings) {
       var base_element_settings = {
         'event': 'click',
-        'progress': { 'type': 'throbber' }
+        'progress': { 'type': 'fullscreen' }
       };
       // Bind AJAX behaviors to all items showing the class.
       $('a.views-ajax-link', context).once('views-ajax').each(function () {

core/modules/views_ui/src/ViewPreviewForm.php

@@ -117,7 +117,7 @@ protected function actions(array $form, FormStateInterface $form_state) {
           'path' => 'admin/structure/views/view/' . $view->id() . '/preview/' . $this->displayID,
           'wrapper' => 'views-preview-wrapper',
           'event' => 'click',
-          'progress' => array('type' => 'throbber'),
+          'progress' => array('type' => 'fullscreen'),
           'method' => 'replaceWith',
         ),
       ),