When i click the button to login, paragraph does not render in the screen. It looks like that changing the style of an element via JS is an async task.

const p = document.getElementById("loadingIndicator");
const btn = document.getElementById("loginBtn");

btn.addEventListener("click", () => {
    p.style.display = "block"; //is this async ?
    new Promise((resolve, reject) => {
        const username = prompt("Enter username: ", "");
        const pass = prompt("Enter password: ", "");
        
        if(
            username.toLowerCase() == "mora" &&
            pass.toLowerCase() == "learncode"
        ) {
            resolve("Successfully login");
        } else {
            reject(new Error("Something went wrong!"));
        }
    })
    .finally(() => p.style.display = "none") 
    .then(
        result => {
            console.log(result);
        },
        error => {
            console.warn(error.message);
        }
    );
});

How to fix this?