Keep showing the working icon while there are pending operations

Before, whenever a pending operation (getting the suggestions,
confirming a share or selecting a recipient) finished the working icon
was hidden and the confirm button was shown again, even if there were
other pending operations (the most common case is typing slowly on the
input field, as several operations to get the suggestions could pile if
the server response is not received fast enough). Now, the working icon
is not hidden until the last pending operation finishes.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

core/js/sharedialogview.js

@@ -68,6 +68,9 @@
 		/** @type {object} **/
 		_lastSuggestions: undefined,
 
+		/** @type {int} **/
+		_pendingOperationsCount: 0,
+
 		events: {
 			'focus .shareWithField': 'onShareWithFieldFocus',
 			'input .shareWithField': 'onShareWithFieldChanged',
@@ -339,6 +342,7 @@
 			$loading.removeClass('hidden');
 			$loading.addClass('inlineblock');
 			$confirm.addClass('hidden');
+			this._pendingOperationsCount++;
 
 			$shareWithField.removeClass('error')
 				.tooltip('hide');
@@ -349,9 +353,12 @@
 				perPage,
 				view.model
 			).done(function(suggestions) {
-				$loading.addClass('hidden');
-				$loading.removeClass('inlineblock');
-				$confirm.removeClass('hidden');
+				view._pendingOperationsCount--;
+				if (view._pendingOperationsCount === 0) {
+					$loading.addClass('hidden');
+					$loading.removeClass('inlineblock');
+					$confirm.removeClass('hidden');
+				}
 
 				if (suggestions.length > 0) {
 					$shareWithField
@@ -386,9 +393,12 @@
 					response();
 				}
 			}).fail(function(message) {
-				$loading.addClass('hidden');
-				$loading.removeClass('inlineblock');
-				$confirm.removeClass('hidden');
+				view._pendingOperationsCount--;
+				if (view._pendingOperationsCount === 0) {
+					$loading.addClass('hidden');
+					$loading.removeClass('inlineblock');
+					$confirm.removeClass('hidden');
+				}
 
 				if (message) {
 					OC.Notification.showTemporary(t('core', 'An error occurred ("{message}"). Please try again', { message: message }));
@@ -431,6 +441,8 @@
 		},
 
 		_onSelectRecipient: function(e, s) {
+			var self = this;
+
 			e.preventDefault();
 			// Ensure that the keydown handler for the input field is not
 			// called; otherwise it would try to add the recipient again, which
@@ -438,11 +450,14 @@
 			e.stopImmediatePropagation();
 			$(e.target).attr('disabled', true)
 				.val(s.item.label);
+
 			var $loading = this.$el.find('.shareWithLoading');
-			$loading.removeClass('hidden')
-				.addClass('inlineblock');
 			var $confirm = this.$el.find('.shareWithConfirm');
+
+			$loading.removeClass('hidden');
+			$loading.addClass('inlineblock');
 			$confirm.addClass('hidden');
+			this._pendingOperationsCount++;
 
 			this.model.addShare(s.item.value, {success: function() {
 				// Adding a share changes the suggestions.
@@ -450,16 +465,24 @@
 
 				$(e.target).val('')
 					.attr('disabled', false);
-				$loading.addClass('hidden')
-					.removeClass('inlineblock');
-				$confirm.removeClass('hidden');
+
+				self._pendingOperationsCount--;
+				if (self._pendingOperationsCount === 0) {
+					$loading.addClass('hidden');
+					$loading.removeClass('inlineblock');
+					$confirm.removeClass('hidden');
+				}
 			}, error: function(obj, msg) {
 				OC.Notification.showTemporary(msg);
 				$(e.target).attr('disabled', false)
 					.autocomplete('search', $(e.target).val());
-				$loading.addClass('hidden')
-					.removeClass('inlineblock');
-				$confirm.removeClass('hidden');
+
+				self._pendingOperationsCount--;
+				if (self._pendingOperationsCount === 0) {
+					$loading.addClass('hidden');
+					$loading.removeClass('inlineblock');
+					$confirm.removeClass('hidden');
+				}
 			}});
 		},
 
@@ -472,6 +495,7 @@
 			$loading.removeClass('hidden');
 			$loading.addClass('inlineblock');
 			$confirm.addClass('hidden');
+			this._pendingOperationsCount++;
 
 			$shareWithField.prop('disabled', true);
 
@@ -485,9 +509,12 @@
 			$shareWithField.autocomplete('disable');
 
 			var restoreUI = function() {
-				$loading.addClass('hidden');
-				$loading.removeClass('inlineblock');
-				$confirm.removeClass('hidden');
+				self._pendingOperationsCount--;
+				if (self._pendingOperationsCount === 0) {
+					$loading.addClass('hidden');
+					$loading.removeClass('inlineblock');
+					$confirm.removeClass('hidden');
+				}
 
 				$shareWithField.prop('disabled', false);
 				$shareWithField.focus();

core/js/tests/specs/sharedialogviewSpec.js

@@ -2009,6 +2009,56 @@ describe('OC.Share.ShareDialogView', function() {
 
 			addShareStub.restore();
 		});
+
+		it('hides the loading icon when all the pending operations finish', function() {
+			dialog.render();
+
+			expect(dialog.$el.find('.shareWithLoading').hasClass('hidden')).toEqual(true);
+			expect(dialog.$el.find('.shareWithConfirm').hasClass('hidden')).toEqual(false);
+
+			var response = sinon.stub();
+			dialog.autocompleteHandler({term: 'bob'}, response);
+			dialog.autocompleteHandler({term: 'bobby'}, response);
+
+			var jsonData = JSON.stringify({
+				'ocs': {
+					'meta': {
+						'status': 'success',
+						'statuscode': 100,
+						'message': null
+					},
+					'data': {
+						'exact': {
+							'users': [],
+							'groups': [],
+							'remotes': []
+						},
+						'users': [],
+						'groups': [],
+						'remotes': [],
+						'lookup': []
+					}
+				}
+			});
+
+			fakeServer.requests[0].respond(
+				200,
+				{'Content-Type': 'application/json'},
+				jsonData
+			);
+
+			expect(dialog.$el.find('.shareWithLoading').hasClass('hidden')).toEqual(false);
+			expect(dialog.$el.find('.shareWithConfirm').hasClass('hidden')).toEqual(true);
+
+			fakeServer.requests[1].respond(
+				200,
+				{'Content-Type': 'application/json'},
+				jsonData
+			);
+
+			expect(dialog.$el.find('.shareWithLoading').hasClass('hidden')).toEqual(true);
+			expect(dialog.$el.find('.shareWithConfirm').hasClass('hidden')).toEqual(false);
+		});
 	});
 	describe('confirm share', function() {
 		var addShareStub;