Массивы – предзаполнение и заполнение

У меня задача сделать плейсхолдеры для товаров на время загрузки. Не могу найти правильный подход. Первое, что пришло в голову и что выдает гугл это отдельный блок на время загрузки, но в таком подходе происходит дерганье при рендеринге, что в моём случае дергает страницу и вызывает дальнейшую подгрузку. И это происходит во всех шаблонизаторах vue/angular/react. Поэтому в голову пришла мысль cделать предзаполнение массива с последующим его заполнением.

let products = [{id: 245}, {id: 233}, {id: 333}]; 
 
// ... функция подгружающия данные 
// добавляем в массив пустые элементы, которые будут рендерится как плэйсхолдеры 
products.push(...[{}, {}, {}]); 
fetch('https://jsonplaceholder.typicode.com/posts/') 
  .then(res => res.json()) 
  .then(newItems => { 
    // заменяем пустые на товары 
    let count = -1; 
    products = products.map(p => { 
      if (p.id) return p; 
      else { 
        count++; 
        return newItems[count] || {}; 
      } 
    }).filter(p => p.id); // удаляем пустые 
    console.log(products); 
  });

Но получается у меня очень костыльно, количество захардкожено, если приходит больше элементов, то не добавляется итд итп. Поэтому вопросы:

1. Как добавить n пустых объектов в массив (без цикла)?
2. Как заполнить и "переполнить" массив, заменяя только пустые элементы?

Или может есть интересней подход?