Olá boa tarde,
Estou implementando o uso de Promise em um código para alterar propriedades da página, e estou aplicando da seguinte forma:
Tenho o botão que ao ser clicado chama a função "loading()" que faz o uso de Promise.all().
        $('.pts-btn-month-view').click( function () {
            console.log('Inicializado');           
            var p = new Promise(function(resolve, reject) {                   
                resolve(loading());
            });
            p.then(function(result) {
                console.log('Finalizado');           
                  return result;
                });
        });
E para cada promise executo uma determinada situação, por exemplo o código do showOverlay() irá exibir um ícone até finalizar o carregamento pesquisa da página.
        var loading = function() {
            return new Promise((resolve, reject) => {
                Promise.all([
                    showOverlay(),
                    loadDisplay(),
                    hideOverlay()    
                ]).then()
                    resolve();
                });
        };
Função para exibir o overlay.
        function showOverlay () { 
            return new Promise ((resolve, reject)=>{ 
                $("#loading").show();
               $("#black-overlay").show();
                  resolve();
            }); 
        }
E para fechar o overlay, temos a função abaixo;
        var hideOverlay = function(){
            return new Promise ((resolve, reject)=>{ 
                $("#loading").hide();
                $("#black-overlay").hide();
                resolve();
            });
        }
Ocorre que tanto o showOverlay() e o hideOverlay() não são executados de acordo com a sequência, eles somente são executados quando finalizar todo o processo. Minha pergunta é se eles não deveriam ser executados assim que a sua promise é chamada?