Adding Loading symbol while processing

Scenario: When some process is processing if you need to show any kind of loading symbol for representing the process may take some time. For this you need to add a loading symbol on the page

Solution: For this you need to add a jQuery section with a HTML code block. The HTML code block indicates the loading symbol section which need to be shown in the processing time.

In the current scenario, I am using a suitelet page to show the message. For this, here we are adding an inline HTML field to carry the loading portion. Then to trigger the loading we need a client script. Here when the button submits, the loading symbol will shown and after completing the process, it will disappear.

//suitelet.js

 var form = serverWidget.createForm({
                    title: 'Resource Allocation'
                });
                form.clientScriptFileId = 180706
                var progressBarField = form.addField({
                    id: 'custpage_progress_bar',
                    type: 'INLINEHTML',
                    label: 'Progress bar'
                });
var loadingUrl = "https://3689903.app.netsuite.com/core/media/media.nlid=32305&c=3689903&h=dcec0a9dd4c1943ff816; //url for loading symbol
                var html = "<div><img id='custpage_load_img' style='height:60px;width:100px;top: 305px;left: 693px;float: right;position: absolute;display: none;' src='" + loadingUrl + "'/></div>";
                progressBarField.defaultValue = html;

In the above code sector, in the HTML section, there is an <img> tag which consist the gif image of the loading symbol. You can change the image according to your requirements.

In the below code sector, we are triggering the loading symbol according to the button click. When the button clicks, the symbol will shown and after the process it will be disabled.

//clientscript.js

var promise = new Promise(function (resolve, reject) {
                    jQuery("#custpage_load_img").css("display", "block");
                    setTimeout(function () {
                        <--- Codes of the process, which you wanted to do --- >
                    }, 5000)
                });

in the above section, we’ve used a javascript promise method. in the jQuery sector, there are two options for display. one is;

jQuery(“#custpage_load_img”).css(“display”, “block”);

and other is;

jQuery(“#custpage_load_img”).css(“display”, “none”);

in the first code (ie; display: block), the loading symbol will show and when the display is in ‘none’ , then the symbol will be hidden.

You can place your logical section of codes inside the setTimeout function. Its because, the UI Thread is bit slower / blocked as compared to JS thread. So, when you put your codes outside the promise function, then first your JS section will execute and after that the loading symbol will execute. More simply, there won’t be any loading symbol while the processing. So if you put all the codes inside the promise function, then first the loading symbol will show and then the processing will be done by executing the JS code section. So after the complete execution, the loading symbol will be hidden and your all other process will be done also.