From 15533d1d1fc6c249ac3b99be8b30234463b6ced3 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Thu, 6 Mar 2014 17:45:26 +0000
Subject: [PATCH] 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 |  4 +++
 src/wp-includes/js/media-views.js   | 41 ++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 9a4478ab2e..b653be51e5 100644
--- a/src/wp-includes/css/media-views.css
+++ b/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;
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 9d39b8da17..a1b9bb5211 100644
--- a/src/wp-includes/js/media-views.js
+++ b/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, _));