Display saved not distributed messages

[prokhn]

I don't find any proper way to display messages that are sending to server at the moment (saved ones). The problem is that I don't know message ID until server response.

What I'm doing: I assign temporary ID to new message like -Math.floor(1000 * Math.random()), and I always know that messages with negative IDs are sending ones. Then I add this message to messages array so user can see all messages he wrote right after he send it (in my case server may respond in 5 seconds, that's pretty much).

My problem is that after server responds and provides real message ID, I mark the message as distributed and try to change ID, but changing message ID cause wrong animation as if some new message was sent then immediately disappeared. Is there a way to change message ID without animation? Or maybe I'm just doing something wrong, is there another way to show saved messages without ID and then mark them as distributed?

GIF (message ID change cause this rerender)

[antoine92190]

Indeed, that's a good question. I probably need to change the way things work a bit to allow this.

[antoine92190]

Fixed in https://github.com/antoine92190/vue-advanced-chat/commit/6fb85c0eab23ec7e4b7c6e7fa9481ca3eb73f2fe You can use your current implementation, and you won't see the animation anymore.

[antoine92190]

Actually, this fix is breaking the messages infinite scroll to load more messages. Will need to make a new fix.

[antoine92190]

You can now use indexId as a temporary message id to prevent animation glitch. https://github.com/antoine92190/vue-advanced-chat/commit/4335df6f9c73a795d1e5f4eb2a6f0486febbefec

[szwss]

Thank you very much for this package, I'm having the same issue, I see the documentation says there is an indexId that can be solved, But how exactly do I use it?

Approximate process: I create a temporary message variable in the send-message event. Then add this temporary variable to this.messages, At this time, the view immediately displays the new message, At the same time, I also sent a request to the server to store the message. This request will respond back in about 2 seconds.

Then i want to modify the temporary message variable just now in this.messages

this.messages[_waitingUpdateMessageIndex] = responseMessageFill
this.$forceUpdate()

this.$set(this.messages,_waitingUpdateMessageIndex,responseMessageFill)

The above two ways to update this.messages will have the problem of animation jumping, It is the same as the GIF sent on the first floor

Should I add indexId to the temporary message variable or after the server responds? Did I miss something

[szwss]

You can now use indexId as a temporary message id to prevent animation glitch. 4335df6

let tempMessageId = Date.now()+'-'+uuidv4()

//tempMessage._id = ''
tempMessage.indexId = tempMessageId

Error: Messages object is not valid! Must contain at least _id[String, Number] and senderId[String, Number]

[arufonsekun]

Fixed in 6fb85c0 You can use your current implementation, and you won't see the animation anymore.

This helped a lot thanks ❤️. A good thing would be a bit more of documentation on this, It was complicated to get the ideia 😅