hdr.insertOoxml doesn't work the first time

Question

When I deploy this add-in to MS Word app, I have to click the button more than once to finally get hdr.insertOoxml() to run successfully. Sometimes had to click on this function more than 4 times (see code below). Although, this seems to work much better (though still not perfect) in the web version of Word 365. Please advise, Thanks!

function applyletterhead() {
    Word.run(function (context) {


        var departmentLH = document.getElementById("lh-department").options[document.getElementById("lh-department").selectedIndex].value;


        var sameLHCB = document.getElementById("sameLH");
        var secondHT = document.getElementById("secondH").value;

        if (sameLHCB.checked === true) {
            toDataURL(departmentLH + '_First.png', function (dataUrl) {
                var myOOXMLRequest = new XMLHttpRequest();
                var myXML;
                myOOXMLRequest.open('GET', '_SP_letterhead_First.xml', false);
                myOOXMLRequest.send();
                if (myOOXMLRequest.status === 200) {
                    myXML = myOOXMLRequest.responseText;
                    myXML = myXML.replace('#####secondH#####', secondHT);
                    myXML = myXML.replace('#####imagepath#####', dataUrl.replace('data:image/png;base64,', ''));
                }
                let hdr = context.document.sections.getFirst().getHeader("Primary"); //returns Word.Body type
                hdr.clear();
                hdr.insertOoxml(myXML, 'Replace');
            });
        }
        else {
            toDataURL(departmentLH + '_First.png', function (dataUrl) {
                var myOOXMLRequest = new XMLHttpRequest();
                var myXML;
                myOOXMLRequest.open('GET', '_SP_letterhead_First.xml', false);
                myOOXMLRequest.send();
                if (myOOXMLRequest.status === 200) {
                    myXML = myOOXMLRequest.responseText;
                    myXML = myXML.replace('#####secondH#####', secondHT);
                    myXML = myXML.replace('#####imagepath#####', dataUrl.replace('data:image/png;base64,', ''));
                }
                let hdr = context.document.sections.getFirst().getHeader("FirstPage"); //returns Word.Body type
                hdr.clear();
                hdr.insertOoxml(myXML, 'Replace');
                console.log("First: ", myXML);
            });

            toDataURL(departmentLH + '_Primary.png', function (dataUrl) {
                var myOOXMLRequest = new XMLHttpRequest();
                var myXML;
                myOOXMLRequest.open('GET', '_SP_letterhead_Primary.xml', false);
                myOOXMLRequest.send();
                if (myOOXMLRequest.status === 200) {
                    myXML = myOOXMLRequest.responseText;
                    myXML = myXML.replace('#####secondH#####', secondHT);
                    myXML = myXML.replace('#####imagepath#####', dataUrl.replace('data:image/png;base64,', ''));
                }
                let hdr = context.document.sections.getFirst().getHeader("Primary"); //returns Word.Body type
                hdr.clear();
                hdr.insertOoxml(myXML, 'Replace');
                console.log("Primary: ", myXML);
            });
        }

Answer 1

Add a call of return context.sync() just below the first and last calls of hdr.insertOOXML.