How to make a loading indicator on each object in the list if the id is generated only on the server?

Question

css

That is, I have a list of files, each has its own id and I can make a loadingSet and see if the file id is in it, then we display the loading indicator on the file, but how to make such indicators when adding new files that do not yet have an id ? What are the ways to implement such functionality?

I can't store the number of downloaded items and display exactly the same number of download indicators at the end of the list, because I still have to display the file name and size along with the indicator.
I also cannot generate my id and store it in the set, because the file with the new id will still come from the server and the file with the indicator will never leave

I don’t need code, but rather I need an idea or ready-made solutions, but for clarity, I’ll say that I need to perform such a download for each file in a mobile application and everything has already been implemented, but in the redesign that we were provided, the download needs to be done on each file in the list, instead of the general loader on the page

Answer 1

leafletjs.com

Answer 2

I hope I understood the question correctly. You get a list like this from api

{
    id: 1,
    name: 'some cool name',
    size: 123,
}

Right in .jsx, you can check for the presence of an id using logical operators and issue a loader or your file.
Everything is quite simple, I left comments in the code
https://stackblitz.com/edit/react-4dx9st?file=src%...