Как сделать индикатор загрузки на каждом объекте в списке, если id генерируется только на сервере?

Вот что-то вроде этого я имею в виду

// Files in a store
const files = [
  {
    id: "rf32fef",
    name: "File 1",
    loadingStatus: "idle",
    comment: "it's file 1",
  },
  {
    id: "rf32ffaefae",
    name: "File 2",
    loadingStatus: "idle",
    comment: "it's file 2",
  },
  {
    id: "rf32feffaef",
    name: "File 3",
    loadingStatus: "idle",
    comment: "it's file 3",
  },
  // User uploads 3 new files
  {
    id: "New File",
    name: "File 4",
    loadingStatus: "loading",
    comment: "it's file 4 that is loading",
  },
  {
    id: "New File",
    name: "File 5",
    loadingStatus: "loading",
    comment: "it's file 5 that is loading",
  },
  {
    id: "New File",
    name: "File 6",
    loadingStatus: "loading",
    comment: "it's file 6 that is loading",
  },
];

// Response when 4th file was loaded but 5th and 6th aren't
const dataFromServer = [
  {
    id: "rf32fef",
    name: "File 1",
    comment: "it's file 1",
  },
  {
    id: "rf32ffaefae",
    name: "File 2",
    comment: "it's file 2",
  },
  {
    id: "rf32feffaef",
    name: "File 3",
    comment: "it's file 3",
  },
  {
    id: "ifoajioejfaoeif",
    name: "File 4",
    comment: "it's file 4 that is loading",
  },
];

То есть новый список просто не будет содержать файлов, которые все еще грузятся и все индикаторы уйдут

Как сделать индикатор загрузки на каждом объекте в списке, если id генерируется только на сервере?

Нет, я говорю, что 7 по порядку файл с индикатором загрузки заменить на реальный файл и убрать индикатор.
То есть нажал добавить 10 файлов и у тебя показываются 10 файлов с индикаторами загрузки -> 7 по счету загрузился на сервер и пришел в ответе новый список файлов с этим 7 по счету, но он уже имеет id -> отрисовывается новый список с новым файлом и 9 индикаторами
А список файлов не будет сильно большим и там у каждого файла хранятся ссылка на файл на сервере, так что получать целый список с сервера не сильно на времени сказывается

Как сделать индикатор загрузки на каждом объекте в списке, если id генерируется только на сервере?

Владимир, Вот второй вариант мне больше подходит, я его и старался реализовать, но что если загружаются стразу много файлов? 10 файлов, которые с индикатором, 7 загрузился -> нужно 7 файл заменить на реальный файл...

Как сделать индикатор загрузки на каждом объекте в списке, если id генерируется только на сервере?

Владимир, Да, довольно сложно описать то, что мне нужно на деле... По сути выглядит это так: список файлов и рядом кнопка, которая за upload отвечает, а при нажатии на сами файлы можно выбрать удалить или заменить файл
Загрузку держать, ты имеешь в виду сделать loadingStatus для каждого файла? Если так то представь, что я добавляю новый файл:

const file1 = {name: 'File 1', comment: 'Мы проверяем данные', ...}

и поставлю ему loadingStatus: loading и отправлю на сервер без этого статуса
В это время в списке сделаю так: {file1.loadingStatus === 'loading' && ], т.е. отрендерю индикатор у такого файла и перед этим добавлю его в список с файлами, который хранится в сторе
Потом когда промис с upload разрешится и я получу файл, который был загружен сервером, то у него будет сгенерированное сервером id, то же имя и все остальные свойства. Как мне понять, какой файл загрузился и у какого файла в общем списке поменять loadingStatus, если id только что сгенерировалось сервером? По имени тоже не сделать, потому что имена могут быть одинаковые у файлов
То есть тут проблема в том, что мне нужно как-то отслеживать изменения в файлах, которые создаются на клиенте без id и свойств по которым можно отслеживать изменения, и когда приходит ответ с сервера менять список файлов