Steps to Add Processing Animation Using SweetAlert2

1. Include SweetAlert2 Library:

• You can host the SweetAlert2 files in your NetSuite File Cabinet or use a CDN.

function OnPageInit() {
    AddJavascript('https://cdn.jsdelivr.net/npm/sweetalert2@11', 'head');
    AddStyle('https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css', 'head');
}

function AddJavascript(jsname, pos) {
    var tag = document.getElementsByTagName(pos)[0];
    var addScript = document.createElement('script');
    addScript.setAttribute('type', 'text/javascript');
    addScript.setAttribute('src', jsname);
    tag.appendChild(addScript);
}

function AddStyle(cssLink, pos) {
    var tag = document.getElementsByTagName(pos)[0];
    var addLink = document.createElement('link');
    addLink.setAttribute('type', 'text/css');
    addLink.setAttribute('rel', 'stylesheet');
    addLink.setAttribute('href', cssLink);
    tag.appendChild(addLink);
}

1. Create a Function to Show Processing Animation:

• This function will be called when you need to show the processing animation.

function showProcessingAnimation() {
    Swal.fire({
        title: 'Processing...',
        text: 'Please wait while we process your request.',
        allowClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });
}

function hideProcessingAnimation() {
    Swal.close();
}

1. Deploy the Client Script:

• Deploy the script for the relevant record or page in NetSuite.

1. Use the Animation in Your Script:

• Call showProcessingAnimation() when you start a process and hideProcessingAnimation() when the process is complete.

function someProcessFunction() {
    showProcessingAnimation();
    // Your processing code here
    // After processing is complete
    hideProcessingAnimation();
}