fixup! Imporve loading experience for message on thread

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

5 files changed, 14 insertions, 28 deletions

diff --git a/src/components/MessageEncryptedBody.vue b/src/components/MessageEncryptedBody.vue
index 512881599..249291ad8 100644
--- a/src/components/MessageEncryptedBody.vue
+++ b/src/components/MessageEncryptedBody.vue
@@ -46,8 +46,8 @@ export default {
 <style scoped>
 #mail-content {
 	height: 450px;
-	animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
-opacity: 0;
+	animation: show 200ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+opacity: 0.3;
 transform: rotateX(-90deg);
 	transform-origin: top center;
 }
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index b9babe5df..f8d333f73 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -189,12 +189,10 @@ export default {
 }
 .message-frame {
 	width: 100%;
-	animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+	animation: show 200ms 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);
+	opacity: 0.3;
 	transform-origin: top center;
 }
 @keyframes show {
diff --git a/src/components/MessagePlainTextBody.vue b/src/components/MessagePlainTextBody.vue
index 8a0150266..d2274342b 100644
--- a/src/components/MessagePlainTextBody.vue
+++ b/src/components/MessagePlainTextBody.vue
@@ -78,9 +78,8 @@ export default {
 <style lang="scss" scoped>
 .message-container {
 	white-space: pre-wrap;
-	animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
-	opacity: 0;
-	transform: rotateX(-90deg);
+	animation: show 200ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+	opacity: 0.3;
 	transform-origin: top center;
 }
 @keyframes show {
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 7ae21a70e..7ac4857d8 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -35,7 +35,6 @@
 			</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)"
@@ -424,19 +423,4 @@ export default {
 .user-bubble__title {
 	cursor: pointer;
 }
-.thread-animation {
-	animation: show 1200ms 1000ms 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 2b519d9c7..71e5e60ab 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -608,12 +608,17 @@ export default {
 		margin-bottom: 36px !important;
 	}
 	.message-animation {
-		animation: show 400ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+		animation: show 200ms 80ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
 
 		// Prestate
-		opacity: 0;
+		opacity: 0.3;
 		// remove transform for just a fade-in
-		transform: rotateX(-90deg);
 		transform-origin: top center;
 	}
+	@keyframes show {
+		100% {
+			opacity: 1;
+			transform: none;
+		}
+	}
 </style>