Trying to inject a live preview SVG into my panel but have a timing issue

EDIT: Please don't move my thread. I get great answers at this forum and whenever I'm pushed to Add-ons, I never get any answers. Please let me keep my thread here where I originally posted it.

I want to make a panel that can package customized SVGs, creating a companion stylesheet and replacing 'cls-1' and etc. with dynamic class names along with other ways of prepping the files. I have it working to inject the SVG into my panel:

But the problem is that I'm having to click twice for an accurate preview because my evalScript function is slower than my reading function. I've tried calling the evalScript before reading, using an anonymous function as the callback of the evalScript and deploying reading from there, using a sleep() function to force a delay on the reading, and sending an event from JSX to JS at the end of my evalScript function and triggering the read from there. No luck even though the event looks like it's the most accurate.

So my problem is that I'm telling Illustrator to export, but all the methods of reading the file I'm using keep happening before my export is finished despite being afterwards in code. Is there a better way to do this? How can I solve this timing issue?

Relevant JSX:

function exportDocument(name){
  exportSVG(name);
  JSXEvent(name, "com.mightySVG.svgReady")
}
function setOptionsForSVGExport(){
  var options = new ExportOptionsWebOptimizedSVG();
  options.artboardRange = '1';
  options.coordinatePrecision = 2;
  options.fontType = SVGFontType.OUTLINEFONT;
  options.svgId = SVGIdType.SVGIDREGULAR;
  options.cssProperties = SVGCSSPropertyLocation.STYLEELEMENTS;
  return options;
}
function exportSVG(name){
  var newName = setPath + "/" + name + ".svg";
  var thisFile = new File(newName);
  var type = ExportType.WOSVG;
  doc.exportFile(thisFile, type, setOptionsForSVGExport());
}
function JSXEvent(payload, eventType) {
  try {
    var xLib = new ExternalObject("lib:\PlugPlugExternalObject");
  } catch (e) {
    JSXEvent(e, 'console')
  }
  if (xLib) {
  var eventObj = new CSXSEvent();
  eventObj.type = eventType;
  eventObj.data = payload;
  eventObj.dispatch();
  }
  return;
}

and Javascript:

var preview = document.getElementById('preview');
// export the SVG on click of button
var btnExport = document.getElementById('push');
btnExport.addEventListener('click', function(e){
  var name = appUI.data.doc;
  csInterface.evalScript(`exportDocument('${name}')`, function(e){
    var thisFile = previewPath + "/" + name + ".svg";
    // sleep(1000);
    var result = window.cep.fs.readFile(thisFile);
    if (0 == result.err)
      newPreview(result.data, name);
    else
      console.log(`Error ${result.err}`);
  })
}, false)
// the event that is meant to fire when the file is ready,
// currently fires before the file is written
csInterface.addEventListener('com.mightySVG.svgReady', function(evt) {
  updatePreview(evt.data);
});
// inject the SVG into preview through AJAX
function updatePreview(file){
  clearPreview();
  // https://stackoverflow.com/a/14070928
  client = new XMLHttpRequest();
  client.open("GET","../preview/" + file + ".svg",false);
  client.overrideMimeType("image/svg+xml");
  client.send("");
  document.getElementById('preview')
  .appendChild(client.responseXML.documentElement);
}
// remove previous svg preview
function clearPreview(){
  while(preview.firstChild){
      preview.removeChild(preview.firstChild);
  }
}
// this parses the created SVG file, creating a stylesheet and SVG file with style omitted
function newPreview(data, name) {
  // ... long ...
}
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

This post moved from Illustrator Scripting to Extensions/AddOns Development. [Moderator]