Show empty content when all messages expired

src/components/MessagesList/MessagesList.vue

@@ -44,10 +44,17 @@ get the messagesList array and loop through the list to generate the messages.
 			:messages="item"
 			:next-message-id="(messagesGroupedByAuthor[index + 1] && messagesGroupedByAuthor[index + 1][0].id) || 0"
 			:previous-message-id="(index > 0 && messagesGroupedByAuthor[index - 1][messagesGroupedByAuthor[index - 1].length - 1].id) || 0" />
-		<template v-if="!messagesGroupedByAuthor.length">
+		<template v-if="showLoadingAnimation">
 			<LoadingPlaceholder type="messages"
 				:count="15" />
 		</template>
+		<NcEmptyContent v-else-if="showEmptyContent"
+			:title="t('spreed', 'No messages')"
+			:description="t('spreed', 'All messages have expired or have been deleted.')">
+			<template #icon>
+				<Message :size="64" />
+			</template>
+		</NcEmptyContent>
 		<transition name="fade">
 			<NcButton v-show="!isChatScrolledToBottom"
 				type="secondary"
@@ -73,16 +80,20 @@ import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus.js'
 import LoadingPlaceholder from '../LoadingPlaceholder.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import Message from 'vue-material-design-icons/Message.vue'
 import uniqueId from 'lodash/uniqueId.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 
 export default {
 	name: 'MessagesList',
 	components: {
 		LoadingPlaceholder,
 		MessagesGroup,
 		ChevronDown,
+		Message,
 		NcButton,
+		NcEmptyContent,
 	},
 
 	mixins: [
@@ -191,6 +202,15 @@ export default {
 			return groups
 		},
 
+		showLoadingAnimation() {
+			return !this.$store.getters.isMessageListPopulated(this.token)
+				&& !this.messagesGroupedByAuthor.length
+		},
+
+		showEmptyContent() {
+			return !this.messagesGroupedByAuthor.length
+		},
+
 		/**
 		 * In order for the state of the component to be sticky,
 		 * the div .scroller must be scrolled to the bottom.

src/store/messagesStore.js

@@ -95,6 +95,15 @@ const state = {
 	 */
 	visualLastReadMessageId: {},
 
+	/**
+	 * Loaded messages history parts of a conversation
+	 *
+	 * The messages list can still be empty due to message expiration,
+	 * but if we ever loaded the history, we need to show an empty content
+	 * instead of the loading animation
+	 */
+	loadedMessages: {},
+
 	/**
 	 * Stores the cancel function returned by `cancelableFetchMessages`,
 	 * which allows to cancel the previous request for old messages
@@ -132,6 +141,10 @@ const getters = {
 		return getters.getLastKnownMessageId(token) < conversation.lastMessage.id
 	},
 
+	isMessageListPopulated: (state) => (token) => {
+		return !!state.loadedMessages[token]
+	},
+
 	/**
 	 * Gets the messages array
 	 *
@@ -367,6 +380,10 @@ const mutations = {
 		}
 	},
 
+	loadedMessagesOfConversation(state, { token }) {
+		Vue.set(state.loadedMessages, token, true)
+	},
+
 	// Decreases reaction count for a particular reaction on a message
 	removeReactionFromMessage(state, { token, messageId, reaction }) {
 		const reactionCount = state.messages[token][messageId].reactions[reaction] - 1
@@ -760,6 +777,8 @@ const actions = {
 			})
 		}
 
+		context.commit('loadedMessagesOfConversation', { token })
+
 		return response
 	},
 
@@ -887,6 +906,8 @@ const actions = {
 			}
 		}
 
+		context.commit('loadedMessagesOfConversation', { token })
+
 		return response
 	},