Why am I unable to open my dialog modally in javascript?

I want a dialog to remain opened while some data is being fetched from the server. This is my code:

(async()=>{
    document.getElementById("dialog").showModal();
    if(condition1 is true){
        await server_call1();
    }
    if(condition2 is true){
        await server_call2();
    }
    if(condition3 is true){
        await server_call3();
    }
    document.getElementById("dialog").close();
})();

All the server_call() are independent of each other. Upon executing the code, this error keeps popping up in my console:

Uncaught (in promise) DOMException: Failed to execute ‘showModal’ on ‘HTMLDialogElement’: The element already has an ‘open’ attribute, and therefore cannot be opened modally.

How do I resolve this issue? Please help me.

EDIT: This is my html:

<dialog id="dialog">
  <p style="font-family: cursive;">Fetching results, please wait.. </p>
</dialog>