fix(webapp): show hint that message is being saved (#8690)

* Show hint that message is being saved

* Translate transmitting message

webapp/components/Chat/Chat.vue

@@ -69,6 +69,14 @@
           </div>
         </div>
 
+        <div
+          v-for="message in messages.filter((m) => m.isUploading)"
+          :slot="'message_' + message._id"
+          v-bind:key="message._id"
+        >
+          {{ $t('chat.transmitting') }}
+        </div>
+
         <div v-for="room in rooms" :slot="'room-list-avatar_' + room.id" :key="room.id">
           <div
             v-if="room.avatar"
@@ -394,6 +402,35 @@ export default {
       if (filesToUpload && filesToUpload.length > 0) {
         mutationVariables.files = filesToUpload
       }
+
+      // Immediately add new message
+      const localMessage = {
+        ...messageDetails,
+        _id: 'new',
+        seen: false,
+        saved: false,
+        date: new Date(),
+        senderId: this.currentUser.id,
+        files:
+          messageDetails.files?.map((file) => ({
+            ...file,
+            url: URL.createObjectURL(new Blob([file.blob], { type: file.type })),
+          })) ?? [],
+        // Custom property
+        isUploading: true,
+      }
+      this.messages = [...this.messages, localMessage]
+
+      const roomIndex = this.rooms.findIndex((r) => r.id === roomId)
+      if (roomIndex !== -1) {
+        const changedRoom = { ...this.rooms[roomIndex] }
+        changedRoom.lastMessage.content = content
+
+        // Move changed room to the top of the list
+        changedRoom.index = changedRoom.lastMessage.date
+        this.rooms = [changedRoom, ...this.rooms.filter((r) => r.id !== roomId)]
+      }
+
       try {
         const { data } = await this.$apollo.mutate({
           mutation: createMessageMutation(),
@@ -401,17 +438,10 @@ export default {
         })
         const createdMessagePayload = data.CreateMessage
 
-        if (createdMessagePayload) {
-          const roomIndex = this.rooms.findIndex((r) => r.id === roomId)
-          if (roomIndex !== -1) {
-            const changedRoom = { ...this.rooms[roomIndex] }
-            changedRoom.lastMessage.content = createdMessagePayload.content.trim().substring(0, 30)
-            changedRoom.lastMessage.date = createdMessagePayload.date
-
-            // Move changed room to the top of the list
-            changedRoom.index = createdMessagePayload.date
-            this.rooms = [changedRoom, ...this.rooms.filter((r) => r.id !== roomId)]
-          }
+        if (createdMessagePayload && roomIndex !== -1) {
+          const changedRoom = { ...this.rooms[roomIndex] }
+          changedRoom.lastMessage.content = createdMessagePayload.content.trim().substring(0, 30)
+          changedRoom.lastMessage.date = createdMessagePayload.date
         }
       } catch (error) {
         this.$toast.error(error.message)

webapp/locales/de.json

@@ -130,6 +130,7 @@
     "roomEmpty": "Keinen Raum selektiert",
     "roomsEmpty": "Keine Räume",
     "search": "Chat-Räume filtern",
+    "transmitting": "Nachricht wird übertragen ...",
     "typeMessage": "Nachricht schreiben",
     "userProfileButton": {
       "label": "Chat",

webapp/locales/en.json

@@ -130,6 +130,7 @@
     "roomEmpty": "No room selected",
     "roomsEmpty": "No rooms",
     "search": "Filter chat rooms",
+    "transmitting": "Transmitting message ...",
     "typeMessage": "Type message",
     "userProfileButton": {
       "label": "Chat",

webapp/locales/es.json

@@ -130,6 +130,7 @@
     "roomEmpty": null,
     "roomsEmpty": null,
     "search": "Filtrar salas de chat",
+    "transmitting": null,
     "typeMessage": null,
     "userProfileButton": {
       "label": null,

webapp/locales/fr.json

@@ -130,6 +130,7 @@
     "roomEmpty": null,
     "roomsEmpty": null,
     "search": "Filtrer les salons de chat",
+    "transmitting": null,
     "typeMessage": null,
     "userProfileButton": {
       "label": null,

webapp/locales/it.json

@@ -130,6 +130,7 @@
     "roomEmpty": null,
     "roomsEmpty": null,
     "search": null,
+    "transmitting": null,
     "typeMessage": null,
     "userProfileButton": {
       "label": null,

webapp/locales/nl.json

@@ -130,6 +130,7 @@
     "roomEmpty": null,
     "roomsEmpty": null,
     "search": null,
+    "transmitting": null,
     "typeMessage": null,
     "userProfileButton": {
       "label": null,

webapp/locales/pl.json

@@ -130,6 +130,7 @@
     "roomEmpty": null,
     "roomsEmpty": null,
     "search": null,
+    "transmitting": null,
     "typeMessage": null,
     "userProfileButton": {
       "label": null,

webapp/locales/pt.json

@@ -130,6 +130,7 @@
     "roomEmpty": null,
     "roomsEmpty": null,
     "search": null,
+    "transmitting": null,
     "typeMessage": null,
     "userProfileButton": {
       "label": null,

webapp/locales/ru.json

@@ -130,6 +130,7 @@
     "roomEmpty": null,
     "roomsEmpty": null,
     "search": null,
+    "transmitting": null,
     "typeMessage": null,
     "userProfileButton": {
       "label": null,