Show loading alert with SweetAlert2 without having to interact

Question

Right now I have this code:

swal({
     title: 'Loading cars from data base',
     showLoaderOnConfirm: true,
     preConfirm: () => {
       return this.carsSvc.getCars().then((cars: ICar[]) => {
               this.setData(cars);
               resolve();
            });
    }
});

This code shows an alert, I have to press 'confirm' and then it shows a loading icon and closes when the loading is finished. I want only the last part of this action, so I don't want to have to confirm the loading before it begins to load. I want the loading to start when the alert is opened and to close automatically when the loading is finished. Is this possible with SweetAlert2?

FYI: You are creating an additional promise for no reason. Just return `this.carsSvc.getCars().then(cars => ...` — Aluan Haddad, May 13 '17 at 20:29
True. Thank you. I thought the resolve() function which is delivered was part of the alert pattern of sweetalert — , May 13 '17 at 20:56
Do you know where the resolve() function comes from in this example? `preConfirm: function () { return new Promise(function (resolve) { $.get('https://api.ipify.org?format=json') .done(function (data) { swal.insertQueueStep(data.ip) resolve() }) })` — , May 13 '17 at 20:59
`resolve` is how you create a promise. It is used to signal successful completion and provide the value that the promise produces (if there is a value). You already have a promise, so you don't need to build one. Often, `resolve` is used to transform a non-promise-based api into a promise based one. — Aluan Haddad, May 13 '17 at 21:01

score 25 · Answer 1 · answered Apr 20 '20 at 09:38

you can also use this

            Swal.fire({
                title: 'Please Wait !',
                html: 'data uploading',// add html attribute if you want or remove
                allowOutsideClick: false,
                onBeforeOpen: () => {
                    Swal.showLoading()
                },
            });

and for close It

swal.close();

score 16 · Answer 2 · answered Nov 02 '17 at 06:38

A little late probably but I figured this out. Try this:

swal({
     title: 'Loading cars from data base'
});
swal.showLoading();

this.carsSvc.getCars().then((cars: ICar[]) => {
           swal.close();
           this.setData(cars);
           // show a new success swal here?
        });

You want to call the swal.showLoading() method to disable buttons. You can then call swal.close() to finish.

score 15 · Answer 3 · answered Jun 10 '21 at 19:41

15

You can try to use this...

Swal.fire({
  title: 'Uploading...',
  html: 'Please wait...',
  allowEscapeKey: false,
  allowOutsideClick: false,
  didOpen: () => {
    Swal.showLoading()
  }
});

answered Jun 10 '21 at 19:41

Sebastián

151
1
2

Show loading alert with SweetAlert2 without having to interact

3 Answers3