fixup! Imporve loading experience for message on thread

Signed-off-by: greta <gretadoci@gmail.com>

5 files changed, 27 insertions, 6 deletions

diff --git a/src/components/MessageEncryptedBody.vue b/src/components/MessageEncryptedBody.vue
index 51ca4a69c..512881599 100644
--- a/src/components/MessageEncryptedBody.vue
+++ b/src/components/MessageEncryptedBody.vue
@@ -46,7 +46,7 @@ export default {
 <style scoped>
 #mail-content {
 	height: 450px;
-	animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+	animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
 opacity: 0;
 transform: rotateX(-90deg);
 	transform-origin: top center;
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 9cb1f031f..b9babe5df 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -43,7 +43,7 @@
 import { iframeResizer } from 'iframe-resizer'
 import PrintScout from 'printscout'
 import { trustSender } from '../service/TrustedSenderService'
-import { NcActionButton as ActionButton, NcActions as Actions, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { NcActionButton as ActionButton, NcActions as Actions } from '@nextcloud/vue'
 import IconImage from 'vue-material-design-icons/ImageSizeSelectActual'
 import IconMail from 'vue-material-design-icons/Email'
 import IconDomain from 'vue-material-design-icons/Domain'
@@ -61,7 +61,6 @@ export default {
 		IconImage,
 		IconMail,
 		IconDomain,
-		IconLoading,
 	},
 	props: {
 		url: {
@@ -190,6 +189,19 @@ export default {
 }
 .message-frame {
 	width: 100%;
+	animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+
+	// Prestate
+	opacity: 0;
+	// remove transform for just a fade-in
+	transform: rotateX(-90deg);
+	transform-origin: top center;
+}
+@keyframes show {
+	100% {
+		opacity: 1;
+		transform: none;
+	}
 }
 :deep(.button-vue__icon) {
 	display: none !important;
diff --git a/src/components/MessagePlainTextBody.vue b/src/components/MessagePlainTextBody.vue
index 834d30a80..8a0150266 100644
--- a/src/components/MessagePlainTextBody.vue
+++ b/src/components/MessagePlainTextBody.vue
@@ -78,7 +78,7 @@ export default {
 <style lang="scss" scoped>
 .message-container {
 	white-space: pre-wrap;
-	animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+	animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
 	opacity: 0;
 	transform: rotateX(-90deg);
 	transform-origin: top center;
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index b60501bf1..7ae21a70e 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -425,7 +425,7 @@ export default {
 	cursor: pointer;
 }
 .thread-animation {
-	animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+	animation: show 1200ms 1000ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
 
 	// Prestate
 	opacity: 0;
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index d3eddd340..2b519d9c7 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -145,6 +145,7 @@
 		</div>
 		<Loading v-if="loading" />
 		<Message v-else-if="message"
+			class="message-animation"
 			:envelope="envelope"
 			:message="message"
 			:full-height="fullHeight" />
@@ -233,7 +234,6 @@ export default {
 	data() {
 		return {
 			loading: false,
-			hidden: true,
 			error: undefined,
 			message: undefined,
 			importantSvg,
@@ -607,4 +607,13 @@ export default {
 	.junk-favorite-position {
 		margin-bottom: 36px !important;
 	}
+	.message-animation {
+		animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+
+		// Prestate
+		opacity: 0;
+		// remove transform for just a fade-in
+		transform: rotateX(-90deg);
+		transform-origin: top center;
+	}
 </style>