Add a loading indicator to the Media Library.

Props kadamwhite, gcorne, kovshenin.
Fixes #24859.



git-svn-id: https://develop.svn.wordpress.org/trunk@27438 602fd350-edb4-49c9-b593-d223f7449a82

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

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

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

@@ -5254,6 +5254,16 @@
 
 			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
 		 */
@@ -5290,6 +5300,10 @@
 				}).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,
@@ -5314,10 +5328,12 @@
 			}
 
 			if ( ! this.collection.length ) {
-				this.collection.more().done( function() {
+				this.toggleSpinner( true );
+				this.collection.more().done(function() {
 					if ( ! view.collection.length ) {
 						view.createUploader();
 					}
+					view.toggleSpinner( false );
 				});
 			}
 		},
@@ -6313,4 +6329,27 @@
 			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, _));