Async execution of code written in client script of UI page

[SmitSheth]

Hello everyone,

I have declarative action (action which is used in workspace) of type list which has client script like this 

function onClick(g_form) { 
	console.log(g_list.getChecked());
	var checkedItems = g_list.getChecked(); // Get the checked items
	var url = '/ui_page.do?sys_id=*******&checkedItems=' + encodeURIComponent(checkedItems);

	g_modal.showFrame({
        url: url,
        title: 'Demo Downnload',
        size: 'lg',
        height: 500
    });
}

which will call ui page whose html script is like this: 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:requires name="styles/heisenberg/heisenberg_all.css" includes="true" />
<g:requires name="scripts/lib/jquery_includes.js" />
<g:requires name="scripts/heisenberg/heisenberg_all.js" />
<g:requires name="scripts/jszip.js" />
<g:requires name="scripts/xlsx.js" />

 <div id="content">
        <!-- Button to trigger Excel generation -->
		<p></p>
        <button id="generateExcel" style="background-color: green">Generate Excel</button>
		<p id="statusMessage" style="display: none;">File is being downloaded...</p>
    </div>
</j:jelly>

on clicking this button in ui page's client script i am accessing id of button and added event listener on 'onClick' 

document.getElementById('generateExcel').addEventListener('click', function() {
    // generateExcelFile();
    var sysIdList;
    var button = document.getElementById('generateExcel');
    var statusMessage = document.getElementById('statusMessage');

    // Disable the button and show the status message
    button.disabled = true;
	button.style.backgroundColor = 'red';
    statusMessage.style.display = 'block';
var jsonFromTable = generateJSON(checkedItems);  // Generate json for excel 
        exportToExcelUtil2(jsonFromTable, function() {
      // Once done, re-enable the button and hide the status message
    button.disabled = false;
    statusMessage.style.display = 'none';
    alert('File download completed!');
    }); // Create excel write json into it and than download it
}  

but on clicking generat excel button it starts executing code synchronously due to which the page gets unresponsive and moreover File is being downloaded status gets shown after file is downloaded and call back function  of button.disabled = false is not getting executed. hence post downloaded button is not enabled and alert also doesn't appear.

To give more idea of how i want functionality a screenshot is attached where basic snow functionality of how export excel is used first excel is created async and than also downloaded async, want to mimic it in some manner.

Thanks in advance for helping out.