Skip to content

showLoader() – MerciGlobal Cloud ERP

The showLoader() function is a custom JavaScript utility built into the MerciGlobal Cloud ERP framework. It plays a critical role in enhancing user experience by providing visual feedback during data processing or background operations.

Purpose

The showLoader() function is used to:

  • Display a "LOADING" message prominently on the screen.
  • Visually block user interaction with the UI until the current operation is complete.
  • Improve the perception of system responsiveness during long-running operations.

When to Use

Use showLoader() in scenarios such as:

  • Data fetching from backend APIs or databases.
  • Form submissions where processing time might be noticeable.
  • Any asynchronous operation that should not be interrupted by user actions.

How It Works

When invoked, showLoader() performs the following steps:

  1. Dynamically inserts a full-screen overlay element.
  2. Displays the text "LOADING" in the center of the screen.
  3. Disables all interactive elements to prevent user actions (e.g., buttons, inputs).

Example: 

// Trigger loader before API call
showLoader();
fetch('/merci/api/loadData')
  .then(response => response.json())
  .then(data => {
    hideLoader(); // another custom function to remove the loading screen
  });

Integration Notes

  • showLoader() is natively available in all Merci JS modules.
  • It does not require any external dependencies.
  • Works seamlessly across all MerciGlobal ERP modules including Sales, Inventory, and HRMS.

Developer Tips

  • Always pair showLoader() with hideLoader() to ensure the UI returns to normal.
  • Avoid using multiple loaders in nested functions—this may cause UI lock-in.
  • For critical processes (e.g., transaction save), always provide loading feedback using this function.

Security Considerations

While showLoader() disables the UI temporarily, it is not a replacement for backend security checks. Ensure proper server-side validation even if the UI is blocked.

Need Help?

For internal MerciGlobal developers or sales engineers, reach out to the core UI/UX engineering team or consult the frontend integration guide.

Enhance customer confidence by making operations feel instantaneous and guided with showLoader().

Stay fast. Stay clean. Stay Merci. ✨