Merge pull request #7219 from nextcloud/improve/add-skeleton-PI

Add skeleton for envelope list and thread

6 files changed, 90 insertions, 18 deletions

diff --git a/src/components/LoadingSkeleton.vue b/src/components/LoadingSkeleton.vue
new file mode 100644
index 000000000..14f213343
--- /dev/null
+++ b/src/components/LoadingSkeleton.vue
@@ -0,0 +1,72 @@
+<template>
+	<div>
+		<div v-for="i in numberOfLines" :key="i" class="item-list__entry">
+			<NcAvatar v-if="withAvatar" class="item-avatar" :size="44" />
+			<div class="item__details">
+				<h3>&nbsp;</h3>
+				<p class="message">
+					&nbsp;
+				</p>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
+
+export default {
+	name: 'LoadingSkeleton',
+	components: {
+		NcAvatar,
+	},
+	props: {
+		numberOfLines: {
+			type: Number,
+			default: 10,
+		},
+		withAvatar: {
+			type: Boolean,
+			default: true,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+
+/* skeleton */
+.item-list__entry {
+	display: flex;
+	align-items: flex-start;
+	padding: 8px;
+.item-avatar {
+	position: relative;
+	margin-top: auto;
+	margin-bottom: auto;
+	background-color: var(--color-background-dark) !important;
+}
+.item__details {
+	padding-left: 8px;
+	max-height: 44px;
+	flex-grow: 1;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+h3,
+.message {
+	white-space: nowrap;
+	background-color: var(--color-background-dark);
+}
+h3 {
+	font-size: 100%;
+	margin: 0;
+}
+.message {
+	width: 80%;
+	height: 15px;
+	margin-top: 5px;
+		}
+	}
+}
+</style>
diff --git a/src/components/Mailbox.vue b/src/components/Mailbox.vue
index 8f4ff1543..703b2a87c 100644
--- a/src/components/Mailbox.vue
+++ b/src/components/Mailbox.vue
@@ -24,7 +24,7 @@
 		:error="t('mail', 'Could not open mailbox')"
 		message=""
 		role="alert" />
-	<Loading v-else-if="loadingEnvelopes" :hint="t('mail', 'Loading messages …')" role="alert" />
+	<LoadingSkeleton v-else-if="loadingEnvelopes" :number-of-lines="20" />
 	<Loading
 		v-else-if="loadingCacheInitialization"
 		:hint="t('mail', 'Loading messages …')"
@@ -46,6 +46,7 @@
 
 <script>
 import EmptyMailbox from './EmptyMailbox'
+import LoadingSkeleton from './LoadingSkeleton'
 import EnvelopeList from './EnvelopeList'
 import Error from './Error'
 import { findIndex, propEq } from 'ramda'
@@ -69,6 +70,7 @@ export default {
 		EnvelopeList,
 		Error,
 		Loading,
+		LoadingSkeleton,
 	},
 	mixins: [isMobile],
 	props: {
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 785d22ce3..e00d9c2d3 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -27,7 +27,7 @@
 				</ActionButton>
 			</Actions>
 		</div>
-		<IconLoading v-if="loading" />
+		<LoadingSkeleton v-if="loading" :with-avatar="false" :number-of-lines="5" />
 		<div id="message-container" :class="{hidden: loading, scroll: !fullHeight}">
 			<iframe ref="iframe"
 				class="message-frame"
@@ -43,10 +43,11 @@
 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'
+import LoadingSkeleton from './LoadingSkeleton'
 
 import logger from '../logger'
 import MdnRequest from './MdnRequest'
@@ -61,7 +62,7 @@ export default {
 		IconImage,
 		IconMail,
 		IconDomain,
-		IconLoading,
+		LoadingSkeleton,
 	},
 	props: {
 		url: {
diff --git a/src/components/Outbox.vue b/src/components/Outbox.vue
index 95240b712..7ad43a55f 100644
--- a/src/components/Outbox.vue
+++ b/src/components/Outbox.vue
@@ -36,9 +36,8 @@
 					:error="t('mail', 'Could not open outbox')"
 					message=""
 					role="alert" />
-				<Loading
-					v-else-if="loading"
-					:hint="t('mail', 'Loading messages …')" />
+				<LoadingSkeleton
+					v-else-if="loading" />
 				<EmptyMailbox v-else-if="messages.length === 0" />
 				<OutboxMessageListItem
 					v-for="message in messages"
@@ -52,7 +51,7 @@
 
 <script>
 import { NcAppContent as AppContent, NcAppContentList as AppContentList } from '@nextcloud/vue'
-import Loading from './Loading'
+import LoadingSkeleton from './LoadingSkeleton'
 import Error from './Error'
 import EmptyMailbox from './EmptyMailbox'
 import OutboxMessageContent from './OutboxMessageContent'
@@ -66,7 +65,7 @@ export default {
 		AppContent,
 		AppContentList,
 		Error,
-		Loading,
+		LoadingSkeleton,
 		EmptyMailbox,
 		OutboxMessageListItem,
 		OutboxMessageContent,
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 2440f0012..0c8600325 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -1,6 +1,6 @@
 <template>
 	<AppContentDetails id="mail-message">
-		<Loading v-if="loading" />
+		<LoadingSkeleton v-if="loading" />
 		<template v-else>
 			<div id="mail-thread-header">
 				<div id="mail-thread-header-fields">
@@ -48,14 +48,13 @@
 
 <script>
 import { NcAppContentDetails as AppContentDetails, NcPopover as Popover } from '@nextcloud/vue'
-
 import { prop, uniqBy } from 'ramda'
 import debounce from 'lodash/fp/debounce'
 
 import { getRandomMessageErrorMessage } from '../util/ErrorMessageFactory'
-import Loading from './Loading'
 import logger from '../logger'
 import RecipientBubble from './RecipientBubble'
+import LoadingSkeleton from './LoadingSkeleton'
 import ThreadEnvelope from './ThreadEnvelope'
 
 export default {
@@ -63,9 +62,9 @@ export default {
 	components: {
 		RecipientBubble,
 		AppContentDetails,
-		Loading,
 		ThreadEnvelope,
 		Popover,
+		LoadingSkeleton,
 	},
 
 	data() {
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index e1a07837c..eb1293d76 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -133,7 +133,7 @@
 				</template>
 			</div>
 		</div>
-		<Loading v-if="loading" />
+		<LoadingSkeleton v-if="loading" :with-avatar="false" :number-of-lines="5" />
 		<Message v-else-if="message"
 			:envelope="envelope"
 			:message="message"
@@ -146,13 +146,12 @@
 	</div>
 </template>
 <script>
-import Avatar from './Avatar'
-import { NcButton as ButtonVue } from '@nextcloud/vue'
+import { NcButton as ButtonVue, Avatar } from '@nextcloud/vue'
+import LoadingSkeleton from './LoadingSkeleton'
 import Error from './Error'
 import importantSvg from '../../img/important.svg'
 import IconFavorite from 'vue-material-design-icons/Star'
 import JunkIcon from './icons/JunkIcon'
-import Loading from './Loading'
 import logger from '../logger'
 import Message from './Message'
 import MenuEnvelope from './MenuEnvelope'
@@ -177,7 +176,6 @@ export default {
 		Error,
 		IconFavorite,
 		JunkIcon,
-		Loading,
 		MenuEnvelope,
 		Moment,
 		Message,
@@ -187,6 +185,7 @@ export default {
 		EmailRead,
 		EmailUnread,
 		DeleteIcon,
+		LoadingSkeleton,
 
 	},
 	props: {