Ticket #24859: 24859.diff

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

@@ -3257 +3257 @@
         media.view.AttachmentsBrowser = media.View.extend({
                 tagName:   'div',
                 className: 'attachments-browser',
+                spinnerCount: 0,
 
                 initialize: function() {
                         _.defaults( this.options, {
@@ -3267 +3268 @@
                                 AttachmentView: media.view.Attachment.Library
                         });
 
+                        media.ajax.on( 'ajax', this.updateSpinner, this );
+
                         this.createToolbar();
                         this.updateContent();
                         this.createSidebar();
@@ -3274 +3277 @@
                         this.collection.on( 'add remove reset', this.updateContent, this );
                 },
 
+                updateSpinner: function( result, options ) {
+                        var view = this,
+                            spinnerActions = ['query-attachments'];
+
+                        if ( _.indexOf(spinnerActions, options.data.action) < 0 )
+                                return;
+
+                        view.spinnerCount += 1;
+                        view.toolbar.get('spinner').show();
+
+                        result.done(function() {
+                                view.spinnerCount -= 1;
+                                if ( view.spinnerCount < 1 )
+                                        view.toolbar.get('spinner').hide();
+                        });
+                },
+
                 dispose: function() {
                         this.options.selection.off( null, null, this );
                         media.View.prototype.dispose.apply( this, arguments );
@@ -3303 +3323 @@
                                 }).render() );
                         }
 
+                        this.toolbar.set( 'spinner', new media.view.Spinner({
+                                priority: -70
+                        }) );
+
                         if ( this.options.search ) {
                                 this.toolbar.set( 'search', new media.view.Search({
                                         controller: this.controller,
@@ -3963 +3987 @@
                         this.$('img').attr( 'src', this.model.get('url') );
                 }
         });
+
+        media.view.Spinner = media.View.extend({
+                tagName:   'span',
+                className: 'spinner',
+
+                show: function() {
+                        this.$el.show();
+                        return this;
+                },
+
+                hide: function() {
+                        this.$el.hide();
+                        return this;
+                }
+        });
 }(jQuery));
+ No newline at end of file

src/wp-includes/js/media-models.js

@@ -90 +90 @@
                  * Sends an XHR request to WordPress.
                  * See wp.ajax.send() in `wp-includes/js/wp-util.js`.
                  */
-                ajax: wp.ajax.send,
+                ajax: function( action, options ) {
+                        if ( _.isObject( action ) )
+                                options = action;
 
+                        var result = wp.ajax.send.apply( this, arguments );
+                        this.ajax.trigger( 'ajax', result, options );
+                        return result;
+                },
+
                 // Scales a set of dimensions to fit within bounding dimensions.
                 fit: function( dimensions ) {
                         var width     = dimensions.width,
@@ -144 +151 @@
                 }
         });
 
+        _.extend( media.ajax, Backbone.Events );
 
+
         /**
          * ========================================================================
          * MODELS

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

@@ -590 +590 @@
 }
 
 /**
+ * Media toolbar spinner
+ */
+.media-frame .media-toolbar .spinner {
+        margin-top: 15px;
+}
+
+/**
  * Search
  */
 .media-frame .search {