I'm using JSPDF and autotables plugin for PDF reports. While the PDF generation is happening I'm trying to show a loading image. Unfortunately, the loading is ignored even when trying with async().

function createPDF(){
  return new Promise(resolve => {
   var doc = new jsPDF();
    doc.autoTable({
        body: [
            ['Elmo', 'Hello'],
            ['Bert', 'The Muppet Show.']
        ]
    });
    
    // mimik time for processing
    setTimeout(function(){
      console.log('wait time for loading image')
    }, 8000);

    doc.save('table.pdf');
    resolve('resolved');

    });
}

async function asyncPDF() {
  document.getElementsByClassName('img__loading')[0].style.display = 'block';
  var result = await createPDF();
  document.getElementsByClassName('img__loading')[0].style.display = 'none';
}

document.getElementById('save').addEventListener("click", asyncPDF );

.img__loading{
  display: none;
}

<script src=".5.3/jspdf.min.js"></script>
<script src=".1.1/jspdf.plugin.autotable.min.js"></script>


<button id="save">save</button>
<img src=".gif" class="img__loading">

I'm using JSPDF and autotables plugin for PDF reports. While the PDF generation is happening I'm trying to show a loading image. Unfortunately, the loading is ignored even when trying with async().

function createPDF(){
  return new Promise(resolve => {
   var doc = new jsPDF();
    doc.autoTable({
        body: [
            ['Elmo', 'Hello'],
            ['Bert', 'The Muppet Show.']
        ]
    });
    
    // mimik time for processing
    setTimeout(function(){
      console.log('wait time for loading image')
    }, 8000);

    doc.save('table.pdf');
    resolve('resolved');

    });
}

async function asyncPDF() {
  document.getElementsByClassName('img__loading')[0].style.display = 'block';
  var result = await createPDF();
  document.getElementsByClassName('img__loading')[0].style.display = 'none';
}

document.getElementById('save').addEventListener("click", asyncPDF );

.img__loading{
  display: none;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jspdf-autotable/3.1.1/jspdf.plugin.autotable.min.js"></script>


<button id="save">save</button>
<img src="https://ui-ex./images/transparent-background-loading.gif" class="img__loading">

The question is why is the loading image not showing up? And why does it start working when wrapping the save() and resolve() inside the timeout?

  setTimeout(function(){
      doc.save('table.pdf');
      resolve('resolved');
  }, 8000);

• javascript
• jspdf
• jspdf-autotable

4 Answers 4

Use promise.then instead of async .And for testing your setTimeout was wrong place.You need to wrap with resolve .While on click your async function trigger all the inner calls.so loading as been immediately disappear after present that why wrap with in then function.then only detect the event finished from promise

function createPDF(){
  return new Promise(resolve => {
   var doc = new jsPDF();
    doc.autoTable({
        body: [
            ['Elmo', 'Hello'],
            ['Bert', 'The Muppet Show.']
        ]
    });

      console.log('wait time for loading image')


    doc.save('table.pdf');
    setTimeout(()=>{
    resolve('resolved');
    },3000)

    });
}

function asyncPDF() {
  document.getElementsByClassName('img__loading')[0].style.display = 'block';
  createPDF().then(()=>{
  document.getElementsByClassName('img__loading')[0].style.display = 'none'})
}

document.getElementById('save').addEventListener("click", asyncPDF );

.img__loading{
  display: none;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jspdf-autotable/3.1.1/jspdf.plugin.autotable.min.js"></script>


<button id="save">save</button>
<img src="https://ui-ex./images/transparent-background-loading.gif" class="img__loading">

The right answer is:

doc.save('export.pdf', { returnPromise: true }).then(() => {
  // Code will be executed after save
});

Use a setTimeout to fake a promise is a bad practice.

You've wrap it into Promise which is good but it's resolved immediately just because there no place where it should wait. setTimeout works because you call resolve after certain amount of time.

In jsPDF site you can find API of save method: http://raw.githack./MrRio/jsPDF/master/docs/jsPDF.html#save

Option that you can be interested in is returnPromise.

So that's should do the job:

await doc.save('table.pdf', {returnPromise: true});

Unfortunately I'm not familiar with jsPDF library nor autotable plugin so forgive any library related errors.

I think the loader doesn't have enough time. Your pdf related stuff is done too quickly, promise resolves and loader hides, so it works as follows:

// show loader
// creating pdf took several milliseconds
// hide loader

When you use setTimeout you put off the promise resolving for 8 seconds.

setTimeout(function(){
      doc.save('table.pdf');
      resolve('resolved'); // resolve is also postponed
  }, 8000);

So the loader is shown for 8 seconds. User has enough time to see it.

Also, it a good practice to use setTimeout to unload the main thread from some heavy operation as long as you are manipulation DOM at the same time. However, using WebWorkers would be the best solution