From e1d4a78b82470bdc1d218c593d247ca59c717542 Mon Sep 17 00:00:00 2001
From: Vitor Mattos <vitor@php.rio>
Date: Fri, 12 Apr 2024 15:11:07 -0300
Subject: [PATCH] feat: loading preview signature

Signed-off-by: Vitor Mattos <vitor@php.rio>
---
 .../PreviewSignature/PreviewSignature.vue     | 27 +++++++++++++++++--
 src/views/Account/partials/Signature.vue      |  9 +++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/Components/PreviewSignature/PreviewSignature.vue b/src/Components/PreviewSignature/PreviewSignature.vue
index 6698ef1ad3..8d048ad27a 100644
--- a/src/Components/PreviewSignature/PreviewSignature.vue
+++ b/src/Components/PreviewSignature/PreviewSignature.vue
@@ -1,12 +1,20 @@
 <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,
@@ -14,6 +22,19 @@ export 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>
diff --git a/src/views/Account/partials/Signature.vue b/src/views/Account/partials/Signature.vue
index 5adeedefb2..5a2c1fa0a7 100644
--- a/src/views/Account/partials/Signature.vue
+++ b/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
 		},