Ticket #24859: 24859.6.diff

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

@@ -1290 +1290 @@
         margin: 0;
 }
 
+.media-toolbar .spinner {
+        display: inline-block;
+        margin-top: 14px;
+}
+
 .media-sidebar .settings-save-status {
         background: #f5f5f5;
         float: right;

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

@@ -5237 +5237 @@
         media.view.AttachmentsBrowser = media.View.extend({
                 tagName:   'div',
                 className: 'attachments-browser',
+                spinnerTimeout: false,
 
                 initialize: function() {
                         _.defaults( this.options, {
@@ -5248 +5249 @@
                         });
 
                         this.createToolbar();
+                        this.toggleSpinner( false );
                         this.updateContent();
                         this.createSidebar();
 
                         this.collection.on( 'add remove reset', this.updateContent, this );
                 },
+                toggleSpinner: function( state ) {
+                        if ( state ) {
+                                this.spinnerTimeout = _.delay( function( view ) {
+                                        view.toolbar.get('spinner').show();
+                                }, 600, this );
+                        } else {
+                                this.toolbar.get('spinner').hide();
+                                clearTimeout( this.spinnerTimeout );
+                        }
+                },
                 /**
                  * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
                  */
@@ -5289 +5301 @@
                                 }).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,
@@ -5313 +5329 @@
                         }
 
                         if ( ! this.collection.length ) {
+                                this.toggleSpinner( true );
                                 this.collection.more().done( function() {
                                         if ( ! view.collection.length ) {
                                                 view.createUploader();
                                         }
+                                        view.toggleSpinner( false );
                                 });
                         }
                 },
@@ -6326 +6344 @@
                         this.$( '.embed-media-settings' ).scrollTop( 0 );
                 }
         });
+
+        /**
+         * wp.media.view.Spinner
+         *
+         *
+         * @constructor
+         * @augments wp.media.View
+         * @augments wp.Backbone.View
+         * @augments Backbone.View
+         */
+        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, _));