A loading gif appears when clicking on a link to generate a PDF

Question

I have a system from which the user by clicking on a link as below opens a PDF file:

<?php 
  while($listar = mysqli_fetch_object($sql)){ 
?>
    <td class="text-center"><a href="#!" data-id="<?php echo $listar->IdCodCarteiras; ?>" id="link" style="color: #000"><i class="fas fa-address-card fa-lg"></i></a><span id="loading"></span></td>
<?php } ?>

This link is directed to a PHP page where it generates the PDF file through the information passed by the global variable $_REQUEST["key"], but I would like to know how to do so that while the PDF file is generated, a gif of loading appears next to the link clicked by the user.

I thought about doing something like this, but I don’t know much about jquery:

$('#link').click(function(){
  $('#loading').html('<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>');
  var id = $(this).attr('data-id'); 
  $.post('processar-pdf.php', {key: id}, function(retorno){
  }); 
});

But I don’t know if it’s right.

Answer 1

There are several ways to solve this, but I will separate two options..

• The first would be to appear the loading for a certain time, usually the average time it takes this portfolio construction. (which is not so recommended, but is simple to solve)

• The second would be sending a callback information with the duration of the process (similar to when you will delete or move a folder on your computer, usually appears, for example: 4 minutes restandtes 130kb of 1000kb.

In the first case you can do this using javascript:

$( document ).ready(function() {
    $("#build").click((e)=>{
    	e.preventDefault();
    	$("#build").hide();
      $("#build-loading").show(); 
      setTimeout(()=> {
      	$("#build").show();
        $("#build-loading").hide(); 
      }, 5000)
    })
});

.container {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-img {
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

p, img {
  margin: 0;
}

img {
  margin-bottom: -50px
}

label {  
  z-index: 1;
  margin-left: 5px;
}

#build-loading{
  width: 100px;  
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />

<div class="container">
  <td class="text-center">
    <a id="build" href="../../../carteiras/?key=<?php echo $listar->IdCodCarteiras; ?>" style="color: #000">
      <i class="fas fa-address-card fa-lg"></i>
    </a>
  </td>
  <div id="build-loading" class="container-img">    
    <img src="https://media.tenor.com/images/618f1cc8de509138d44a37bfd5e3412f/tenor.gif" width="100" alt=""><label>Construindo...</label>
  </div>  
</div>

Basically it was made the occultation and the desolcutação of items in html, which was resumed after a time that would be the construction time.

Notice that the parameter of setTimeout is the construction time in milliseconds. In the example it was put that the construction time would take 5 seconds, use this tool to find out the time of seconds in milliseconds.

Now to simulate a server callback, I’m going to use this json

var continuar = 0;
$( document ).ready(function() {
    $("#build").click((e)=>{
    	e.preventDefault();
    	$("#build").hide();
      $("#build-loading").show(); 
            
      simulandoCallbackApi();                          
    })
});

const simulandoCallbackApi = () => {  
  setTimeout(() => {    
    $.ajax({
      method: "GET",
      url: "http://www.json-generator.com/api/json/get/cfeUYUyUEi?indent=2",      
    }).done(function(data) {
       console.log(data);
       if(data.success){
        $("#build").show();
        $("#build-loading").hide(); 
       }
    });
  }, 1000); 
}

.container {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-img {
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

p, img {
  margin: 0;
}

img {
  margin-bottom: -50px
}

label {  
  z-index: 1;
  margin-left: 5px;
}

#build-loading{
  width: 100px;  
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />

<div class="container">
  <td class="text-center">
    <a id="build" href="../../../carteiras/?key=<?php echo $listar->IdCodCarteiras; ?>" style="color: #000">
      <i class="fas fa-address-card fa-lg"></i>
    </a>
  </td>
  <div id="build-loading" class="container-img">    
    <img src="https://media.tenor.com/images/618f1cc8de509138d44a37bfd5e3412f/tenor.gif" width="100" alt=""><label>Construindo...</label>
  </div>  
</div>

Soon the simulated functionCallbackApi represents the process being done inside your php, and once it is finished the button is presented again.