Custom Loading Behavior Replacement in SuiteCommerce

Replacing the default loading icon with custom loading behavior allows developers to enhance the user interface in SuiteCommerce applications, improving user experience during data loads and API calls.

Understanding the Replacement Process

For effective implementation, it's crucial to understand how SuiteCommerce handles HTTP requests and displays loading indicators by default. Under the hood, all requests utilize jQuery.ajax(), with the loading icon being managed through event handlers.

Key Implementation Steps

To replace the loading icon and set up custom behavior, follow these outlined steps:

Step 1: Unbinding Default Event Handlers

You’ll need to remove the default event handlers that show and hide the loading icon before adding your version. Execute the following code in your module or extension entry point:

jQuery(document).unbind('ajaxStart', SC.loadingIndicatorShow);
jQuery(document).unbind('ajaxStop', SC.loadingIndicatorHide);
jQuery('#loadingIndicator').remove();

Step 2: Adding Custom Event Handlers

After unbinding the default handlers, establish your custom loading behavior. You can either write your code or integrate third-party solutions. Here’s a typical structure:

1"text-purple-400">define('CustomLoadingIndicator', [
2   'jQuery',
3   'LoadingIndicatorLibraryFile'
4], "text-purple-400">function CustomLoadingIndicator (
5   jQuery,
6   LoadingIndicatorLibraryFile
7) {
8   'use strict';
9 
10   // Code to load third-party loading indicator file
11   LoadingIndicatorLibraryFile.mountToApp();
12 
13   // Bind custom event listeners
14   jQuery(document)
15      .ajaxStart(LoadingIndicatorLibraryFile.loadingIndicatorShow())
16      .ajaxStop(LoadingIndicatorLibraryFile.loadingIndicatorHide());
17});

In this example, LoadingIndicatorLibraryFile refers to the file with your custom loading logic. If you create your logic, integrate it directly in the entry module.

Step 3: Testing Your Customization

Once your customizations are in place, test them:

• Locally: Reload your website if running it on a local server using Gulp.js. Gulp watches for file changes, automatically recompiling as needed.
• In NetSuite: Deploy your changes via the developer tools to see them in action.

Conclusion

Implementing a customized loading behavior not only enhances the visual feedback for users but also allows for better integration of third-party loading libraries. Be sure to test thoroughly to ensure performance remains optimized.

If you encounter issues, revisit your code structure and reference the configuration documentation for any additional requirements or troubleshooting tips.