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>

2 files changed, 94 insertions, 17 deletions

diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js
index 0b36db65116..dede768fad5 100644
--- a/core/js/sharedialogview.js
+++ b/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();
diff --git a/core/js/tests/specs/sharedialogviewSpec.js b/core/js/tests/specs/sharedialogviewSpec.js
index 1b4c19bbb44..d3639159849 100644
--- a/core/js/tests/specs/sharedialogviewSpec.js
+++ b/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;