Merge pull request #12674 from nextcloud/backport/12550/stable29

[stable29] fix(chat): show spinner for temporary / edited messages
nextcloud · Jul 11, 2024 · 0f10983 · 0f10983
2 parents 1d537eb + 0597410
commit 0f10983
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -83,7 +83,7 @@
 
 		<!-- Additional message info-->
 		<div v-if="!isDeletedMessage" class="message-main__info">
-			<span v-if="!hideDate" class="date" :title="messageDate">{{ messageTime }}</span>
+			<span :class="['date', { 'date--hidden': hideDate }]" :title="messageDate">{{ messageTime }}</span>
 
 			<!-- Message delivery status indicators -->
 			<div v-if="sendingFailure"
@@ -270,6 +270,7 @@ export default {
 
 	data() {
 		return {
+			isEditing: false,
 			showReloadButton: false,
 			codeBlocks: null,
 			currentCodeBlock: null,
@@ -347,17 +348,11 @@ export default {
 		},
 
 		messageTime() {
-			if (this.hideDate) {
-				return null
-			}
-			return moment(this.timestamp * 1000).format('LT')
+			return moment(this.isTemporary ? undefined : this.timestamp * 1000).format('LT')
 		},
 
 		messageDate() {
-			if (this.hideDate) {
-				return null
-			}
-			return moment(this.timestamp * 1000).format('LL')
+			return moment(this.isTemporary ? undefined : this.timestamp * 1000).format('LL')
 		},
 
 		isLastCallStartedMessage() {
@@ -383,7 +378,7 @@ export default {
 		},
 
 		showLoadingIcon() {
-			return (this.isTemporary && !this.isFileShareMessage) || this.isDeleting
+			return this.isTemporary || this.isDeleting || this.isEditing
 		},
 
 		loadingIconTooltip() {
@@ -419,6 +414,7 @@ export default {
 	},
 
 	mounted() {
+		EventBus.$on('editing-message-processing', this.setIsEditing)
 		if (!this.containsCodeBlocks) {
 			return
 		}
@@ -510,7 +506,13 @@ export default {
 				console.error(error)
 				showError(t('spreed', 'Could not update the message'))
 			}
-		}
+		},
+
+		setIsEditing({ messageId, value }) {
+			if (messageId === this.id) {
+				this.isEditing = value
+			}
+		},
 	},
 }
 </script>
@@ -589,8 +591,15 @@ export default {
 		flex: 1 0 auto;
 		padding: 0 8px 0 8px;
 
-		.date:last-child {
-			margin-right: var(--default-clickable-area);
+		.date {
+			&--hidden {
+				pointer-events: none;
+				opacity: 0;
+			}
+
+			&:last-child {
+				margin-right: var(--default-clickable-area);
+			}
 		}
 	}
 }

diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
@@ -657,6 +657,7 @@ const actions = {
 	 * @param {string} payload.updatedMessage The modified text of the message / file share caption
 	 */
 	async editMessage(context, { token, messageId, updatedMessage }) {
+		EventBus.$emit('editing-message-processing', { messageId, value: true })
 		const message = Object.assign({}, context.getters.message(token, messageId))
 		context.commit('addMessage', {
 			token,
@@ -670,10 +671,12 @@ const actions = {
 				updatedMessage,
 			})
 			context.dispatch('processMessage', { token, message: response.data.ocs.data })
+			EventBus.$emit('editing-message-processing', { messageId, value: false })
 		} catch (error) {
 			console.error(error)
 			// Restore the previous message state
 			context.commit('addMessage', { token, message })
+			EventBus.$emit('editing-message-processing', { messageId, value: false })
 			throw error
 		}
 	},