Failed to display a dialog window during the event

Photoshop UXP Plugin API
1

I have in my UXP plugin, as well as in the CEP extension functions with events that take too long and I needed to add a personalized progress window so that the user can wait for its completion, but with UXP this does not work for me, the modal window loads, but it does not displays UI items until the event completes.
How it worked with CEP / JSX

How it worked with UXP

html

<dialog id="dlgProcess" style= "padding: 30px;"  >	
  <div style=' width: 100%; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center; '>
     <div style=" width: 60px; height: 60px; background-image: url(../icons/processando.svg); object-fit: cover;"></div>
     <label style="color: #d5d2d2;" for="">Process...</label>
  </div>
</dialog>

jx

document.getElementById("Pocess").addEventListener("click", function(){
  core.executeAsModal(async () => {
       document.querySelector("#dlgProcess").show({ title: "Processing", resize: "both", size: { width: 150, height: 150} })
       CapasConfigP2(); //// my functions 
  })
});
2

I used two methods to make the event start after rendering the HTML elements

document.querySelector("#dlgProcess").show({ title: "Processing", resize: "both", size: { width: 150, height: 150} })
document.addEventListener("DOMContentLoaded", function() {
   // code to be executed after rendering the HTML elements
    window.addEventListener("load", CapasConfigP2);
});

or

document.querySelector("#dlgProcess").show({ title: "Processing", resize: "both", size: { width: 150, height: 150} })
window.addEventListener("load", CapasConfigP2);

In both the window renders correctly but the event does not execute