This site was built to compliment the existing NetSuite Professionals Slack Community by adding a means for members to easily find answers to common questions and to create a searchable database of those questions and answers.

NetSuite Professionals

hello all, we're using SCA 2020.1. can anyone how to add custom loading icon and preventing user don't click anywhere on the website until completing the request?

<https://developers.suitecommerce.com/customize-the-loading-icon>

this article is working fine for SCA Kilimanajro and earlier but for SCA 2020.1 not working because we were unable to extend the this module because it is normal jquery module. can you help us how to figure it out. thanks in advance

The loading icon is just a div that loads at the bottom of the page and then is toggled with AJAX activity.

At its simplest you just need to apply CSS to the element so that it 'blocks' the page

Eg
```&lt;div id="loadingIndicator" style="position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; background-color:rgba(255, 255, 255, 0.85);"&gt;&lt;img class="global-loading-indicator" src="path/to/your/img/ajax-loader.gif" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)"&gt;&lt;/div&gt;```

If you don't want to replace ajaxSetup, which is understandable, then you can just unbind the events, eg:
```    jQuery(document).unbind('ajaxStart', SC.loadingIndicatorShow);
    jQuery(document).unbind('ajaxStop', SC.loadingIndicatorHide);
    jQuery('#loadingIndicator').remove();```
And then use an extension to add in your own

Eg:
```    jQuery(document)
        .ajaxStart(LoadingIndicatorLibraryFile.loadingIndicatorShow())
        .ajaxStop(LoadingIndicatorLibraryFile.loadingIndicatorHide());```

Where `LoadingIndicatorLibraryFile` is the dependency with the new loading icon in, and those methods are for showing/hiding it

thanks, i'll check and let you know in case of any issues.