How to show the loading icon in the body of the message being loaded in a loop, vue.js?

Question

Vue.js

I output an array of messages

<ul  v-for="item in messages">
    ...
        {{ item.message }}
    ...
</ul>

Here is the array itself

{
  "status": "",
  "messages": [
    {
      "user": "Nikolay",
      "message": "hello"
    },
    {
      "user": "Petr",
      "message": "hi"
    }
  ]
}

Question. The data is received by Ajax with a delay of 2 seconds approximately. The loading icon works, but I would like it like this: "message": "loader" and after 2 seconds "message": "hi"
Tried to push data before and after the ajax request, but it turns out two separate messages. it and is clear - 2 iterations. How would this be combined? I would like to show the download icon in the message wrapper itself.

Answer 1

I tried pushing data before and after the Ajax request, but I get two separate messages. it and is clear - 2 iterations.

And you do this: before the request, add a new object to messages, remember the index, after the request for the index, update the data. Something like this (instead of the setTimeout ajax, but I think the principle is clear).