Progress bar before run function

I have a page for issuing a certificate, and it takes some time to create the requisition and the keys, because everything is done in the browser. I want to implement a progress bar so the user does not 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 instinctively, there is a delay, which seems to be running the OnClick () function 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 test. I tried using jquerry, sun.

<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>