Imporve loading experience for message on thread

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

5 files changed, 46 insertions, 3 deletions

diff --git a/src/components/MessageEncryptedBody.vue b/src/components/MessageEncryptedBody.vue
index 666936ec0..51ca4a69c 100644
--- a/src/components/MessageEncryptedBody.vue
+++ b/src/components/MessageEncryptedBody.vue
@@ -46,5 +46,16 @@ export default {
 <style scoped>
 #mail-content {
 	height: 450px;
+	animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+opacity: 0;
+transform: rotateX(-90deg);
+	transform-origin: top center;
 }
+@keyframes show {
+	100% {
+		opacity: 1;
+		transform: none;
+	}
+}
+
 </style>
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 408087634..9cb1f031f 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -27,9 +27,9 @@
 				</ActionButton>
 			</Actions>
 		</div>
-		<IconLoading v-if="loading" />
 		<div id="message-container" :class="{hidden: loading, scroll: !fullHeight}">
-			<iframe ref="iframe"
+			<iframe v-show="!hidden"
+				ref="iframe"
 				class="message-frame"
 				:title="t('mail', 'Message frame')"
 				:src="url"
@@ -81,6 +81,7 @@ export default {
 	data() {
 		return {
 			loading: true,
+			hidden: true,
 			hasBlockedContent: false,
 			isSenderTrusted: this.message.isSenderTrusted,
 		}
@@ -109,6 +110,7 @@ export default {
 			return iframe.contentDocument || iframe.contentWindow.document
 		},
 		onMessageFrameLoad() {
+			this.hidden = false
 			const iframeDoc = this.getIframeDoc()
 			this.hasBlockedContent
 				= iframeDoc.querySelectorAll('[data-original-src]').length > 0
diff --git a/src/components/MessagePlainTextBody.vue b/src/components/MessagePlainTextBody.vue
index 750448a5f..834d30a80 100644
--- a/src/components/MessagePlainTextBody.vue
+++ b/src/components/MessagePlainTextBody.vue
@@ -76,7 +76,19 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.message-container,
+.message-container {
+	white-space: pre-wrap;
+	animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+	opacity: 0;
+	transform: rotateX(-90deg);
+	transform-origin: top center;
+}
+@keyframes show {
+	100% {
+		opacity: 1;
+		transform: none;
+	}
+}
 .mail-signature {
 	white-space: pre-wrap;
 }
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 7ac4857d8..b60501bf1 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -35,6 +35,7 @@
 			</div>
 			<ThreadEnvelope v-for="env in thread"
 				:key="env.databaseId"
+				class="thread-animation"
 				:envelope="env"
 				:mailbox-id="$route.params.mailboxId"
 				:expanded="expandedThreads.includes(env.databaseId)"
@@ -423,4 +424,19 @@ export default {
 .user-bubble__title {
 	cursor: pointer;
 }
+.thread-animation {
+	animation: show 600ms 100ms 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;
+	}
+}
 </style>
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 983eb7e69..d3eddd340 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -233,6 +233,7 @@ export default {
 	data() {
 		return {
 			loading: false,
+			hidden: true,
 			error: undefined,
 			message: undefined,
 			importantSvg,
@@ -490,6 +491,7 @@ export default {
 		margin-right: 10px;
 		background-color: var(--color-main-background);
 		padding-bottom: 28px;
+		min-height: 150px;
 
 		& + .envelope {
 			margin-top: -28px;