Add loading spinner beside button while starting export or import

Signed-off-by: Christopher Ng <[email protected]>

Author: Pytal

js/user_migration-personal-settings.js

@@ -49,16 +49,19 @@
 			</div>
 		</div>
 
-		<Button v-if="status.current !== 'export'"
-			type="secondary"
-			:aria-label="t('user_migration', 'Export your data')"
-			:disabled="status.current === 'import'"
-			@click.stop.prevent="startExport">
-			<template #icon>
-				<PackageDown title="" :size="20" />
-			</template>
-			{{ t('user_migration', 'Export') }}
-		</Button>
+		<div v-if="status.current !== 'export'"
+			class="section__status">
+			<Button type="secondary"
+				:aria-label="t('user_migration', 'Export your data')"
+				:disabled="status.current === 'import'"
+				@click.stop.prevent="startExport">
+				<template #icon>
+					<PackageDown title="" :size="20" />
+				</template>
+				{{ t('user_migration', 'Export') }}
+			</Button>
+			<div v-if="startingExport" class="icon-loading" />
+		</div>
 		<div v-else class="section__status">
 			<Button type="secondary"
 				:aria-label="t('user_migration', 'Show export status')"
@@ -133,6 +136,7 @@ export default {
 	data() {
 		return {
 			modalOpened: false,
+			startingExport: false,
 			selectedMigrators: [],
 		}
 	},
@@ -157,11 +161,16 @@ export default {
 		async startExport() {
 			try {
 				await confirmPassword()
+				this.startingExport = true
 				await axios.post(generateOcsUrl('/apps/{appId}/api/v1/export', { appId: APP_ID }), {
 					migrators: this.selectedMigrators,
 				})
-				this.$emit('refresh-status', () => this.openModal())
+				this.$emit('refresh-status', () => {
+					this.openModal()
+					this.startingExport = false
+				})
 			} catch (error) {
+				this.startingExport = false
 				const errorMessage = error.message || 'Unknown error'
 				this.logger.error(`Error starting user export: ${errorMessage}`, { error })
 				showError(errorMessage)

js/user_migration-personal-settings.js.map

@@ -30,16 +30,19 @@
 
 		<!-- TODO use server API -->
 
-		<Button v-if="status.current !== 'import'"
-			type="secondary"
-			:aria-label="t('user_migration', 'Import your data')"
-			:disabled="status.current === 'export'"
-			@click.stop.prevent="pickImportFile">
-			<template #icon>
-				<PackageUp title="" :size="20" />
-			</template>
-			{{ t('user_migration', 'Import') }}
-		</Button>
+		<div v-if="status.current !== 'import'"
+			class="section__status">
+			<Button type="secondary"
+				:aria-label="t('user_migration', 'Import your data')"
+				:disabled="status.current === 'export'"
+				@click.stop.prevent="pickImportFile">
+				<template #icon>
+					<PackageUp title="" :size="20" />
+				</template>
+				{{ t('user_migration', 'Import') }}
+			</Button>
+			<div v-if="startingImport" class="icon-loading" />
+		</div>
 		<div v-else class="section__status">
 			<Button type="secondary"
 				:aria-label="t('user_migration', 'Show import status')"
@@ -76,6 +79,7 @@
 </template>
 
 <script>
+import confirmPassword from '@nextcloud/password-confirmation'
 import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 
 import Button from '@nextcloud/vue/dist/Components/Button'
@@ -114,6 +118,7 @@ export default {
 	data() {
 		return {
 			modalOpened: false,
+			startingImport: false,
 			filePickerError: null,
 		}
 	},
@@ -139,10 +144,17 @@ export default {
 				if (!filePath.startsWith('/')) {
 					throw new Error()
 				}
+
 				try {
+					await confirmPassword()
+					this.startingImport = true
 					// TODO call API to start background job
-					this.$emit('refresh-status', () => this.openModal())
+					this.$emit('refresh-status', () => {
+						this.openModal()
+						this.startingImport = false
+					})
 				} catch (error) {
+					this.startingImport = false
 					const errorMessage = error.message || 'Unknown error'
 					this.logger.error(`Error starting user import: ${errorMessage}`, { error })
 					showError(errorMessage)

src/components/ExportSection.vue

@@ -27,7 +27,9 @@ import '@nextcloud/dialogs/styles/toast.scss'
 import logger from './logger'
 import PersonalSettings from './views/Personal/Settings'
 
-Vue.mixin({ props: { logger }, methods: { t, n } })
+Vue.prototype.t = t
+Vue.prototype.n = n
+Vue.prototype.logger = logger
 
 export default new Vue({
 	el: '#personal-settings',

src/components/ImportSection.vue

@@ -86,9 +86,9 @@ export default {
 			}
 		},
 
-		async onRefreshStatus(openModalCallback) {
+		async onRefreshStatus(callback) {
 			await this.fetchStatus()
-			openModalCallback()
+			callback()
 		},
 	},
 }