JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" autofocus="off" />

<div id="wait-dialog">
</div>

<div id="content-dialog">
</div>

JavaScript

$('#wait-dialog').dialog({
        autoOpen: false,
        height: 88,
        width: 250,
        modal: true,
        title: 'Please Wait',
        close: function (event, ui) {
            $(this).dialog('destroy');
        },
        open: function () { }
    });
    
$('#content-dialog').dialog({
        autoOpen: false,
        height: 188,
        width: 350,
        modal: true,
        title: 'I Am Some Content',
        close: function (event, ui) {
            $(this).dialog('destroy');
        },
        open: function () { }
    });
 
 // This would be in a click handler for a button to open the wait dialog and start the long running process
$('#wait-dialog').dialog('open');

// Long running operations would start here, and the below lines would be in the callback
$('#content-dialog').dialog('open');

$('#wait-dialog').dialog('close');