How achieve multiple "loading images" for each cell of table's data while it is being asynchronously fetched from PHP script?

Question

I would like to have a box. In the box a user enters a string and presses the OK button. This request is then sent to the PHP backend, which gives me back 20 rows of results.

But, for each of those 20 rows, I'll also have a few columns, but this data will take much much longer to generate (~10 seconds each, not from MySQL, but separate PHP requests).

Instead of having my user stare at one big loading animation for 10 minutes, I would like to have multiple animations.

End result would be that the 20 row's titles are shown, but in each 'cell' of the remaining data, there is a little loading animation to let the user know and it still working, and replaces with the value when the data is available.

I usually code back ends and this front end Ajax stuff is witchcraft to me :) What terminology should I be looking for to accomplish what I've described above?

Answer 1

Umm, so put a loading image in each of the cells, give them unique IDs, and then once that specific content is loaded you can hide the image with that ID and put in the content. You can use the same image for all of them.