Add loading during the installation process

👨‍💻 Development Help
1

Hi team,

I’ve created a module to be installed via the Module Loader in the Admin panel, and it’s working fine. However, when I click Install, it shows a blank page in the suitecrm until the process is complete, then it displays the completion message. The same thing happens during Uninstall.

To improve the user experience and prevent them from closing the window too early, I’d like to add a loading spinner or showing Please wait message.

I was thinking of adding this in the post_execute script, but I’m wondering if there’s a better or more appropriate way to handle this.
Any suggestions?

2

Hi team, can someone help me with this?

3

I do know much but , if you’ve already customized other parts of SuiteCRM 8, you could take a more advanced route

  • Extend or override the Angular UI component that handles module installs.
  • Add a modal/spinner component that appears on install.
  • This is more effort but offers cleaner integration and better UX consistency.

Maybe try this:

public/legacy/modules/Administration/UpgradeWizard_commit.php

Add JavaScript that listens for the form submission

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('form[name="ModuleUpload"]');
    if (form) {
      form.addEventListener('submit', function () {
        const loadingOverlay = document.createElement('div');
        loadingOverlay.innerHTML = '<div class="loading">Installing... Please wait.</div>';
        loadingOverlay.style = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center; font-size: 24px;';
        document.body.appendChild(loadingOverlay);
      });
    }
  });
</script>
4

Hi @rsp , thanks for your response :wave:. I will try to test this approach.