Eu preciso inserir uma enorme marcação html em algum elemento dom que levará algum tempo. É uma razão pela qual eu quero exibir algum indicador de pré-carregador. Eu tenho dois blocos: #preloader e #container. Algum código exibe o pré-carregador primeiro e depois começa a colar uma grande marcação html.

O problema - o preloader realmente não foi exibido até o navegador não concluir a renderização da marcação html. Eu tentei muitas soluções (muitas delas são descritasaqui) mas ainda não obteve sucesso.

Um exemplo está disponível abaixo:https://jsfiddle.net/f9f5atzu/

<div id='preloader'>Preloader...</div>
<div id='container'>Container...</div>

#preloader {
  display: none;
  background-color: #f00;
  color: #fff;
  hight: 100px;
  text-align: center;
  padding: 10px 20px;
}

#container {
  background-color: #ccc;
}


setTimeout(function() {
  // Define variables
  let domPreloader = document.getElementById('preloader');
  let domContainer = document.getElementById('container');
  const html = Array(100000).fill("<div>1</div>");

  // Display preloader
  domPreloader.style.display = 'hide';
  domPreloader.offsetHeight;
  domPreloader.style.webkitTransform = 'scale(1)';
  domPreloader.style.display = 'block';

  // Render a big html
  domContainer.innerHTML = html;
}, 1000);

Existe alguma solução para o problema?