Estou escrevendo meu primeiro pedaço de código usando o Promises e estou obtendo resultados inesperados. Eu tinha algum código parecido com este (usando jQuery):

$('.loading-spinner').show();
$('.elements').replaceWith(function() {
   // Blocking code to generate and return a replacement element
});
$('.newElements').blockingFunction();
$('.loading-spinner').hide();

Para evitar que a página seja bloqueada quando esse código é executado, tentei usar setTimeout e Promises para torná-lo assíncrono, assim:

$('.loading-spinner').show();
var promises = [];
var promises2 = [];
$('.elements').each(function(i, el){
    promises[i] = new Promise(function(resolve, reject) {
        setTimeout(function() {
            $(el).replaceWith(function() {
                // Code to generate and return a replacement element
            });
            resolve(true);
        }, 100);
    });
});
Promise.all(promises).then(function(values) {
    $('.newElements').each(function(i, el) {
        promises2[i] = new Promise(function(resolve, reject) {
            setTimeout(function() {
                $(el).blockingFunction();
                resolve(true);
            }, 100);
        });
    });
});
Promise.all(promises2).then(function(values) {
    $('.loading-spinner').hide();
});

O que estou tentando alcançar é que, uma vez que as promessas empromises resolvidas, as promessas empromises2 são instanciados. Uma vez resolvidos, o botão giratório de carregamento fica oculto.

O efeito que estou obtendo é que, enquanto a página não fica bloqueada por muito tempo, o botão giratório desaparece assim que todas as promessas são definidas, sem esperar até que sejam resolvidas.

Eu posso ver que opromises2 Promessas não resolvem até que tudopromises está resolvido, então eu não entendo por que isso está acontecendo. Eu acho que isso se deve a mim não entender as promessas corretamente ou não subestimar a codificação assíncrona.