Show loading icon when loading tags

Signed-off-by: Christopher Ng <chrng8@gmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

1 files changed, 29 insertions, 19 deletions

diff --git a/apps/systemtags/src/components/SystemTags.vue b/apps/systemtags/src/components/SystemTags.vue
index c518dfd18d1..9315d0eb6c0 100644
--- a/apps/systemtags/src/components/SystemTags.vue
+++ b/apps/systemtags/src/components/SystemTags.vue
@@ -22,25 +22,30 @@
 
 <template>
 	<div class="system-tags">
-		<label for="system-tags-input">{{ t('systemtags', 'Search or create collaborative tags') }}</label>
-		<NcSelectTags class="system-tags__select"
-			input-id="system-tags-input"
-			:placeholder="t('systemtags', 'Collaborative tags …')"
-			:options="sortedTags"
-			:value="selectedTags"
-			:create-option="createOption"
-			:taggable="true"
-			:passthru="true"
-			:fetch-tags="false"
-			:loading="loading"
-			@input="handleInput"
-			@option:selected="handleSelect"
-			@option:created="handleCreate"
-			@option:deselected="handleDeselect">
-			<template #no-options>
-				{{ t('systemtags', 'No tags to select, type to create a new tag') }}
-			</template>
-		</NcSelectTags>
+		<NcLoadingIcon v-if="loadingTags"
+			:name="t('systemtags', 'Loading collaborative tags …')"
+			:size="32" />
+		<template v-else>
+			<label for="system-tags-input">{{ t('systemtags', 'Search or create collaborative tags') }}</label>
+			<NcSelectTags class="system-tags__select"
+				input-id="system-tags-input"
+				:placeholder="t('systemtags', 'Collaborative tags …')"
+				:options="sortedTags"
+				:value="selectedTags"
+				:create-option="createOption"
+				:taggable="true"
+				:passthru="true"
+				:fetch-tags="false"
+				:loading="loading"
+				@input="handleInput"
+				@option:selected="handleSelect"
+				@option:created="handleCreate"
+				@option:deselected="handleDeselect">
+				<template #no-options>
+					{{ t('systemtags', 'No tags to select, type to create a new tag') }}
+				</template>
+			</NcSelectTags>
+		</template>
 	</div>
 </template>
 
@@ -48,6 +53,7 @@
 // FIXME Vue TypeScript ESLint errors
 /* eslint-disable */
 import Vue from 'vue'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcSelectTags from '@nextcloud/vue/dist/Components/NcSelectTags.js'
 
 import { translate as t } from '@nextcloud/l10n'
@@ -74,6 +80,7 @@ export default Vue.extend({
 	name: 'SystemTags',
 
 	components: {
+		NcLoadingIcon,
 		NcSelectTags,
 	},
 
@@ -88,6 +95,7 @@ export default Vue.extend({
 		return {
 			sortedTags: [] as TagWithId[],
 			selectedTags: [] as TagWithId[],
+			loadingTags: false,
 			loading: false,
 		}
 	},
@@ -123,12 +131,14 @@ export default Vue.extend({
 		fileId: {
 			immediate: true,
 			async handler() {
+				this.loadingTags = true
 				try {
 					this.selectedTags = await fetchSelectedTags(this.fileId)
 					this.$emit('has-tags', this.selectedTags.length > 0)
 				} catch (error) {
 					showError(t('systemtags', 'Failed to load selected tags'))
 				}
+				this.loadingTags = false
 			},
 		},
 	},