How can I add a loading method to a sweetalert2's dialogt via React JS?

Question

I am writing a web project that records audio and sends it to a backend server.

After the user is done recording, I'm using sweetalert2's Swal.fire() to show a success message and get the user's input I need in order to complete the process (the title to the PDF that will be created).

When the user is pressing the submit button, an axios request is sent to the server, which takes a few seconds.

Right now in my code, when the sweetalert's 'Submit' button is pressed, the popup window closes and the user should just wait without any indicator that says the page is waiting for the response.

My question is: how can I change the popup's content to let the user know its loading using sweetalert2's interface (or if there is a better way to do so)?

The Swal.fire() code:

const stopRecording = () => {
    // .. stop recording
    
    Swal.fire({
      icon: "success",
      title: '<span style="color: white">Recording Saved!</span>',
      text:
        "Please Enter the Title for the Output Audio Sheets...\n You can press cancel and record again",
      input: "text",
      showCancelButton: true,
      confirmButtonColor: "white",
      confirmButtonText: '<span style="color: #191919">Submit</span>',
      cancelButtonColor: "white",
      cancelButtonText: '<span style="color: #191919">Cancel</span>',
      customClass: "swal-confirm",
    }).then((result) => {
      if (!result.value) return;
      else {
        // .. getting the data and performing axios request
      }
    });
};

Now when you've read the code, I can be more specific. The Swal.fire().then() method is the one that takes time and I want to change the window so when it is executing the user can see a progress bar or something like this.

Answer 1

I've done some research, and I found the solution.

Actually, sweetalert2's object has a property just for stuff like that, and it is called preConfirm.

It is used for making web requests or loading some data right before the window closes.

Also, with this property, I avoided using the .then() method, which made the code more elegant and readable.

My code now:

const saveRecording = (audioData) => {
    // .. stop and save recording

    Swal.fire({
      // Swal properties
      icon: "success",
      title: '<span style="color: white">Recording Saved!</span>',
      text:
        "Please Enter the Title for the Output Audio Sheets...\n You can press cancel and record again",
      input: "text",
      inputPlaceholder: "Enter Your Title Here",
      showCancelButton: true,

      // input validator
      inputValidator: (value) => {
        if (!value) {
          return "Title cannot be empty!";
        }
      },

      // styles
      confirmButtonColor: "white",
      confirmButtonText: '<span style="color: #191919">Submit</span>',
      cancelButtonColor: "white",
      cancelButtonText: '<span style="color: #191919">Cancel</span>',
      customClass: "swal-confirm",

      // This is my solution 
      preConfirm: (title) => {
        // .. axios request here using `title` as the input
      },
      allowOutsideClick: () => !Swal.isLoading(),
      showLoaderOnConfirm: true,
    });
  };

You can go and take a look at the official sweetalert2's example for making AJAX requests right here: https://sweetalert2.github.io/#ajax-request