Merge pull request #7612 from nextcloud/enhancement/single-step-html-…

…body-loading

Make HTML body loading a single step experience

src/components/Message.vue

@@ -36,7 +36,8 @@
 		<MessageHTMLBody v-if="message.hasHtmlBody"
 			:url="htmlUrl"
 			:message="message"
-			:full-height="fullHeight" />
+			:full-height="fullHeight"
+			@load="$emit('load', $event)" />
 		<MessageEncryptedBody v-else-if="isEncrypted"
 			:body="message.body"
 			:from="from"

src/components/MessageHTMLBody.vue

@@ -27,8 +27,7 @@
 				</ActionButton>
 			</Actions>
 		</div>
-		<IconLoading v-if="loading" />
-		<div id="message-container" :class="{hidden: loading, scroll: !fullHeight}">
+		<div id="message-container" :class="{scroll: !fullHeight}">
 			<iframe ref="iframe"
 				class="message-frame"
 				:title="t('mail', 'Message frame')"
@@ -43,7 +42,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 +60,6 @@ export default {
 		IconImage,
 		IconMail,
 		IconDomain,
-		IconLoading,
 	},
 	props: {
 		url: {
@@ -80,7 +78,6 @@ export default {
 	},
 	data() {
 		return {
-			loading: true,
 			hasBlockedContent: false,
 			isSenderTrusted: this.message.isSenderTrusted,
 		}
@@ -115,7 +112,7 @@ export default {
 				|| iframeDoc.querySelectorAll('[data-original-style]').length > 0
 				|| iframeDoc.querySelectorAll('style[data-original-content]').length > 0
 
-			this.loading = false
+			this.$emit('load')
 			if (this.isSenderTrusted) {
 				this.displayIframe()
 			}

src/components/ThreadEnvelope.vue

@@ -143,11 +143,13 @@
 				</template>
 			</div>
 		</div>
-		<Loading v-if="loading" />
-		<Message v-else-if="message"
+		<Loading v-if="loading !== LOADING_DONE" />
+		<Message v-if="message && loading !== LOADING_MESSAGE"
+			v-show="loading === LOADING_DONE"
 			:envelope="envelope"
 			:message="message"
-			:full-height="fullHeight" />
+			:full-height="fullHeight"
+			@load="loading = LOADING_DONE" />
 		<Error v-else-if="error"
 			:error="error && error.message ? error.message : t('mail', 'Not found')"
 			:message="errorMessage"
@@ -181,6 +183,11 @@ import { matchError } from '../errors/match'
 import NoTrashMailboxConfiguredError from '../errors/NoTrashMailboxConfiguredError'
 import { isPgpText } from '../crypto/pgp'
 
+// Ternary loading state
+const LOADING_DONE = 0
+const LOADING_MESSAGE = 1
+const LOADING_BODY = 2
+
 export default {
 	name: 'ThreadEnvelope',
 	components: {
@@ -232,11 +239,14 @@ export default {
 	},
 	data() {
 		return {
-			loading: false,
+			loading: LOADING_DONE,
 			error: undefined,
 			message: undefined,
 			importantSvg,
 			seenTimer: undefined,
+			LOADING_BODY,
+			LOADING_DONE,
+			LOADING_MESSAGE,
 		}
 	},
 	computed: {
@@ -303,6 +313,7 @@ export default {
 				this.fetchMessage()
 			} else {
 				this.message = undefined
+				this.loading = LOADING_DONE
 			}
 		},
 	},
@@ -323,7 +334,7 @@ export default {
 	},
 	methods: {
 		async fetchMessage() {
-			this.loading = true
+			this.loading = LOADING_MESSAGE
 
 			logger.debug(`fetching thread message ${this.envelope.databaseId}`)
 
@@ -339,7 +350,11 @@ export default {
 					}, 2000)
 				}
 
-				this.loading = false
+				if (this.message.hasHtmlBody) {
+					this.loading = LOADING_BODY
+				} else {
+					this.loading = LOADING_DONE
+				}
 			} catch (error) {
 				logger.error('Could not fetch message', { error })
 			}