Progress bar before function run

Question

I have a certificate issuing page, and it takes some time to create the request and keys, as it is all done in the browser. I want to implement a progress bar so the user doesn’t get the impression that the site has crashed. I’m using materialize from google and I already have this code, the problem is that when I click the button, instead of appearing the bar instantaneously, there is a delay, which seems to be running the function of Onclick() and then the bar appears and is already redirected, the idea is that the first thing that happens is the bar appear.

I have tried to put inside the function, create another function that calls these two, nothing works, even in other browsers tested. I tried to use jquerry, gift.

<button name="submitform" id="submitform" type="button" value="submit" onclick="generateKey()" class="waves-effect waves-light btn azul-icpedu-2" autocomplete="off">Submeter</button>

<div class="progress" style="display: none;">
    <div class="indeterminate"></div>
</div>

<script type="text/javascript">
     $("#submitform").click(function(){
          $(".progress").css('display', 'block');
     });
</script>

<script type="text/javascript">

    async function generateKey(){
        var keySize = $("#keygen").val();
        var email = $("#email").val();
        var p12pw = $("#p12pw").val();

        if (p12pw === "") {
            location.reload();
        }


        sessionStorage.setItem("p12pw", JSON.stringify(p12pw));

        const publicKeyPem = await generateKeys(keySize, "privateKeyPem");

        $("#publickey").val(publicKeyPem);

        $("form").submit();
    };

</script>