Ajax file upload throbber for a dynamic webform

CSS

span.ajax-throbber.icon {
  min-height: 0px;
  min-width: 0px;
  padding-left: 0px;
  position: relative;
}

JS

(function (jQuery, Drupal) {
  jQuery(document).ready(function () {

    // Store the observers for re-initializations.
    var observer = null;
    var globalObserver = null;

    // Enable/Disable function for the throbber and "Next" button.
    function toggleThrobber(show) {
      var $throbber = jQuery('.ajax-throbber');
      console.log('Nombre de throbber:' + $throbber.length);
      var $buttonNext = jQuery('button.webform-button--next');

      if (show) {
        $buttonNext.each(function () {
          console.log('button next disabled');
          jQuery(this).prop('disabled', true);
        });
        $throbber.each(function () {
          console.log('show throbber');
          jQuery(this).show();
        });
      } else {
        console.log('hide throbber');
        $buttonNext.each(function () {
          console.log('button next enabled');
          jQuery(this).prop('disabled', false);
        });
        $throbber.each(function () {
          console.log('hide throbber');
          jQuery(this).hide();
        });
      }
    }

    // Add the throbber markup to the AJAX wrapper elements.
    function addThrobberToAjaxWrappers() {
      jQuery('div[id^="ajax-wrapper--"]').each(function () {
        if (!jQuery('body').find('.ajax-throbber').length) {
          console.log('Ajouter ajax-throbber.');
          var $throbber = jQuery('<span class="ajax-throbber glyphicon-spin icon glyphicon glyphicon-refresh" aria-hidden="true"></span>');
          $throbber.hide();
          jQuery(this).append($throbber);
        }
      });
    }

    // Verify that the Attachment_upload_button is present.
    function waitForUploadButton() {
      var intervalId = setInterval(function () {
        if (jQuery('button[name="Attachment_upload_button"]').length) {
          clearInterval(intervalId);
          console.log('Le bouton "Attachment_upload_button" est prêt.');
          addThrobberToAjaxWrappers();
        }
      }, 100);

      setTimeout(function () {
        clearInterval(intervalId);
        console.warn('The "Attachment_upload_button" was not found after 5 minutes.');
      }, 300000); // 5 minutes max
    }

    // Observe the changes to detect uploaded files.
    function observeFileUploads() {
      // Clean up the previous observer if it still exists.
      if (observer) {
        observer.disconnect();
        console.log('Previous observer stopped.');
      }
      if (globalObserver) {
        globalObserver.disconnect();
        console.log('previous globalObserver stopped.');
      }

      observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          if (mutation.type === 'childList') {
            console.log('Changes detcted in the form.');
            var hasFiles = jQuery('div.form-item.form-type-checkbox').find('input').length > 0;
            console.log(hasFiles ? 'Files detected' : 'No file detected');
            // toggleThrobber(!hasFiles);
            // This didn't work correctly so I dissabled the toggleThrobber call here and moved it.
          }
        });
      });

      jQuery('div[id^="ajax-wrapper--"]').each(function () {
        console.log('Observer added for ', this.id);
        observer.observe(this, { childList: true, subtree: true });
      });

      // Observe the entire document to detect new `ajax-wrapper--`
      globalObserver = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
          mutation.addedNodes.forEach(function (node) {
            if (node.nodeType === 1 && node.id && node.id.startsWith('ajax-wrapper--')) {
              console.log('New ajax-wrapper detected:', node.id);
              toggleThrobber(false);
              observer.observe(node, { childList: true, subtree: true });
            }
          });
        });
      });

      globalObserver.observe(document.body, { childList: true, subtree: true });
    }

    // Listen to AJAX to start and stop the throbber.
    jQuery(document).ajaxSend(function (event, xhr, settings) {
      console.log('ajaxSend. toggleThrobber(true)');
      toggleThrobber(true);
    });

    jQuery(document).ajaxComplete(function (event, xhr, settings) {
      waitForUploadButton();
      addThrobberToAjaxWrappers();
      observeFileUploads(); // Reinitialize the MutationObserver after each AJAX
    });

    // Initialization
    waitForUploadButton();
    addThrobberToAjaxWrappers();
    observeFileUploads();
  });
})(jQuery, Drupal);