Search code examples
javascriptjquerysweetalertsweetalert2

SweetAlert popup takes too time to show


I am using sweetalert to show a list of data(large data) and then allowing users to choose from the list of data. The HTML for the sweetalert is generated by backend but when I try to open this list it takes 10-15 seconds time. The HTML is already executed by backend so why is showing this taking so much time?

Is there a way to reduce this time? Note* I have used Data Tables in HTML data to show data.

swal({
        title: 'Assign an User',
        html: html_text,
        customClass: 'user-table-holder',
        confirmButtonText: 'Assign',
        showCancelButton: true,
        preConfirm: function () {
            return new Promise(function (resolve, reject) {
                var user_data = {
                    id: '',
                    name: ''
                };
                if ($('input[type=radio][name=assign-user]:checked').size() > 0) {
                    user_data.id = $('input[type=radio][name=assign-user]:checked').val();
                    user_data.name = $('.user-name[data-user-id="' + user_data.id + '"]').text();
                    resolve(user_data);
                } else {
                    reject('You need to select an user');
                }
            });
        }
    }).then(function (user_data) {
        $('input[name=user]').val(user_data.id);
        $('input[name=status]').val('Inactive');
        $('.status-text').text('User assigned (' + user_data.name + ')');
        user_assigned = true;

        swal({
            title: 'User assigned',
            text: 'The user has been assigned successfully',
            type: 'success',
            timer: 2000,
            showConfirmButton: false
        }).catch(swal.noop);
    }).catch(swal.noop);

Solution

  • Maybe the data tables plugin that you are using is taking time. Also try removing predefined classes from the html body as it will look for the class and load the library which will take time to load.

    Are you using django templates for rendering this html?

    If yes, you should never send data in objects format. Try using values_list which will convert the data as a query-list and then it will not make a db query on every request.