Ticket #33049: 33049.2.diff

src/js/media/views/attachments/browser.js

@@ -423 +423 @@
 
                 if ( ! this.collection.length ) {
                         this.toolbar.get( 'spinner' ).show();
+                        this.toolbar.$( '.media-bg-overlay' ).show();
                         this.dfd = this.collection.more().done( function() {
                                 if ( ! view.collection.length ) {
                                         noItemsView.$el.removeClass( 'hidden' );
@@ -430 +431 @@
                                         noItemsView.$el.addClass( 'hidden' );
                                 }
                                 view.toolbar.get( 'spinner' ).hide();
+                                view.toolbar.$( '.media-bg-overlay' ).hide();
                         } );
                 } else {
                         noItemsView.$el.addClass( 'hidden' );
                         view.toolbar.get( 'spinner' ).hide();
+                        this.toolbar.$( '.media-bg-overlay' ).hide();
                 }
         },
 

src/js/media/views/toolbar.js

@@ -28 +28 @@
                 // The toolbar is composed of two `PriorityList` views.
                 this.primary   = new wp.media.view.PriorityList();
                 this.secondary = new wp.media.view.PriorityList();
+                this.tertiary  = new wp.media.view.PriorityList();
                 this.primary.$el.addClass('media-toolbar-primary search-form');
                 this.secondary.$el.addClass('media-toolbar-secondary');
+                this.tertiary.$el.addClass('media-bg-overlay');
 
-                this.views.set([ this.secondary, this.primary ]);
+                this.views.set([ this.secondary, this.primary, this.tertiary ]);
 
                 if ( this.options.items ) {
                         this.set( this.options.items, { silent: true });
@@ -122 +124 @@
                 delete this._views[ id ];
                 this.primary.unset( id, options );
                 this.secondary.unset( id, options );
+                this.tertiary.unset( id, options );
 
                 if ( ! options || ! options.silent ) {
                         this.refresh();

src/wp-includes/css/media-views.css

@@ -2809 +2809 @@
                 font-size: 14px;
                 line-height: 2.71428571;
         }
+
+        .media-frame .wp-filter .media-toolbar-secondary {
+                position: unset;
+        }
+        
+        .media-frame .media-toolbar-secondary .spinner {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                margin: auto;
+                left: 0;
+                right: 0;
+                z-index: 9;
+        }
+        
+        .media-bg-overlay {
+                content: '';
+                background: #ffffff;
+                width: 100%;
+                height: 100%;
+                display: hidden;
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                opacity: 0.6;
+        }
 }
 
 /* Responsive on portrait and landscape */