How to show loading function before get data from server?

I use Ajax and SweetAlert2 library to use alert UI. I search the how can I show the loading process during get data from server and I thought I can use beforeSend function. I write code like this.

So I put the Loading Process code inside the beforeSend but I don’t know why It’s not working. So I want to check is it works in beforeSend code so I write console.log code inside it and it actually works. But I don’t know why the Swal.showLoading(); code is not working.

When I just type it in google console it works.

Loading Code is Simple.

Swal.showLoading();

And I want When it finish it show Finish Code.

/* Mypage */
function getData() {
    Swal.fire({
        title: 'Do you want to get data from Github?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        allowOutsideClick: false,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, Get DATA!'
    }).then((result) => {
        if (result.value) {
            $.ajax({
                type: "POST",
                // contentType: "application/json",
                url: `/${userId}/admin/getData`,
                dataType: "json",
                beforeSend: function () {
                    Swal.showLoading();
                    console.log('Loading');
                },
                success: function (redrawData) {
                    console.log(JSON.stringify(redrawData));
                    let existTable = $('#dataTable').DataTable();
                    existTable.destroy();
                    $('#dataTable').DataTable({
                        aaData: redrawData, // Returned Data from Server
                        aoColumns: [{
                                mData: 'id',
                                "render": function (value, type, row) {
                                    return `<a href="/${userId}/${row.id}">${row.id}</a>`;
                                }
                            },
                            {
                                mData: 'name'
                            },
                            {
                                mData: 'type'
                            },
                            {
                                mData: 'url'
                            },
                            {
                                mData: 'imgurl',
                                "render": function (value, type, row) {
                                    return `<img src="${row.imgurl}">`;
                                }
                            },
                            {
                                mData: 'sumlang'
                            },
                            {
                                mData: 'pjdate1'
                            },
                            {
                                mData: 'pjdate2'
                            },
                            {
                                mData: 'githuburl'
                            }
                        ]
                    })
                },
                complete: function () {
                    Swal.fire(
                        'Get!',
                        'Your file has been deleted.',
                        'success'
                    )
                },
                error: function (e) {
                    Swal.fire(
                        'Failed to save',
                        'If this message is output continuously, please contact to administrator.',
                        'error'
                    )
                }
            });
        }
    })
}

I never used SweetAlert but I have taken a look on their website exmaple and found this

const ipAPI = 'https://api.ipify.org?format=json'

Swal.queue([{
  title: 'Your public IP',
  confirmButtonText: 'Show my public IP',
  text:
    'Your public IP will be received ' +
    'via AJAX request',
  showLoaderOnConfirm: true,
  preConfirm: () => {
    return fetch(ipAPI)
      .then(response => response.json())
      .then(data => Swal.insertQueueStep(data.ip))
      .catch(() => {
        Swal.insertQueueStep({
          type: 'error',
          title: 'Unable to get your public IP'
        })
      })
  }
}])

They use fetch with preConfirm in their exmaple, but in your case, I guess you can try to use preConfirm attribute that return the Promise created by the JQuery $.ajax() function

Example:

/* Mypage */
function getData() {
    Swal.fire({
        title: 'Do you want to get data from Github?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        allowOutsideClick: false,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, Get DATA!',
        showLoaderOnConfirm: true,
        allowOutsideClick: () => !Swal.isLoading(),
        preConfirm: function(){
            return $.ajax(...); //Your ajax function here
        }
    });
}

You could just set the showLoaderOnConfirm to true to show the preloader when you click the continue button. Then, add the ajax call inside the preConfirm. Just make sure to return the response and catch any errors.

Swal.fire({
  title: 'Submit your Github username',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Look up',
  showLoaderOnConfirm: true,
  preConfirm: (login) => {
    return fetch(`//api.github.com/users/${login}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.value) {
    Swal.fire({
      title: `${result.value.login}'s avatar`,
      imageUrl: result.value.avatar_url
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>