Add spinner when loading ext storages

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

apps/files_external/css/settings.scss

@@ -4,6 +4,10 @@
 
 #externalStorage {
 	margin: 15px 0 20px 0;
+
+	tr.externalStorageLoading > td {
+		text-align: center;
+	}
 }
 
 #externalStorage td {

apps/files_external/js/settings.js

@@ -907,6 +907,14 @@ MountConfigListView.prototype = _.extend({
 	loadStorages: function() {
 		var self = this;
 
+		var onLoaded1 = $.Deferred();
+		var onLoaded2 = $.Deferred();
+
+		this.$el.find('.externalStorageLoading').removeClass('hidden');
+		$.when(onLoaded1, onLoaded2).always(() => {
+			self.$el.find('.externalStorageLoading').addClass('hidden');
+		})
+
 		if (this._isPersonal) {
 			// load userglobal storages
 			$.ajax({
@@ -953,8 +961,11 @@ MountConfigListView.prototype = _.extend({
 						$('#emptycontent').show();
 					}
 					onCompletion.resolve();
+					onLoaded1.resolve();
 				}
 			});
+		} else {
+			onLoaded1.resolve();
 		}
 
 		var url = this._storageConfigClass.prototype._url;
@@ -973,6 +984,7 @@ MountConfigListView.prototype = _.extend({
 					self.recheckStorageConfig($tr);
 				});
 				onCompletion.resolve();
+				onLoaded2.resolve();
 			}
 		});
 	},

apps/files_external/templates/settings.php

@@ -124,6 +124,11 @@ $canCreateMounts = $_['visibilityType'] === BackendService::VISIBILITY_ADMIN ||
 			</tr>
 		</thead>
 		<tbody>
+			<tr class="externalStorageLoading">
+				<td colspan="8">
+					<span id="externalStorageLoading" class="icon icon-loading"></span>
+				</td>
+			</tr>
 			<tr id="addMountPoint"
 			<?php if (!$canCreateMounts): ?>
 				style="display: none;"