feat: loading preview signature

Signed-off-by: Vitor Mattos <[email protected]>

src/Components/PreviewSignature/PreviewSignature.vue

@@ -1,19 +1,40 @@
 <template>
-	<div class="modal-draw">
-		<img :src="src">
+	<div>
+		<NcLoadingIcon v-if="loading" :size="64" :name="t('libresign', 'Loading file')" />
+		<div v-show="isLoaded" class="modal-draw">
+			<img v-show="isLoaded" :src="src" @load="onImageLoad">
+		</div>
 	</div>
 </template>
 
 <script>
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
 export default {
 	name: 'PreviewSignature',
+	components: {
+		NcLoadingIcon,
+	},
 	props: {
 		src: {
 			type: String,
 			default: () => '',
 			required: true,
 		},
 	},
+	data() {
+		return {
+			loading: true,
+			isLoaded: false,
+		}
+	},
+	methods: {
+		onImageLoad() {
+			this.loading = false
+			this.isLoaded = true
+			this.$emit('loaded')
+		},
+	},
 }
 </script>
 
@@ -23,5 +44,7 @@ export default {
 	border-radius: 10px;
 	margin-top: 10px;
 	margin-bottom: 10px;
+	min-width: 350px;
+	min-height: 95px;
 }
 </style>

src/views/Account/partials/Signature.vue

@@ -4,7 +4,7 @@
 			<h2>
 				<slot name="title" />
 			</h2>
-			<NcActions :inline="2">
+			<NcActions :inline="2" v-if="isSignatureLoaded">
 				<NcActionButton v-if="hasSignature" @click="removeSignature">
 					<template #icon>
 						<DeleteIcon :size="20" />
@@ -19,7 +19,8 @@
 		</header>
 
 		<div v-if="hasSignature">
-			<PreviewSignature :src="imgSrc" />
+			<PreviewSignature :src="imgSrc"
+				@loaded="signatureLoaded" />
 		</div>
 		<div v-else class="no-signatures" @click="edit">
 			<slot name="no-signatures" />
@@ -67,6 +68,7 @@ export default {
 	},
 	data: () => ({
 		isEditing: false,
+		isSignatureLoaded: false,
 	}),
 	computed: {
 		hasSignature() {
@@ -80,6 +82,9 @@ export default {
 		},
 	},
 	methods: {
+		signatureLoaded() {
+			this.isSignatureLoaded = true
+		},
 		edit() {
 			this.isEditing = true
 		},