Set loading display time

Question

I have the following code that I use to send the form data to the PHP file.

function loginRequest() {

 // Declaração de Variáveis
 var usuario   = document.getElementById("txtusuario").value;
 var senha   = document.getElementById("txtsenha").value;
 var result = document.getElementById("resultado");
 var xmlreq = CriaRequest();

 // Exibi a imagem de progresso
 result.innerHTML = '<img id="loading-icon" src="./images/eclipse.gif"/>';

 // Iniciar uma requisição
 xmlreq.open("GET", "./controllers/controller.php?txtusuario=" + usuario + "&txtsenha=" + senha, true);

 // Atribui uma função para ser executada sempre que houver uma mudança de ado
 xmlreq.onreadystatechange = function(){

     // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
     if (xmlreq.readyState == 4) {

         // Verifica se o arquivo foi encontrado com sucesso
         if (xmlreq.status == 200) {
             result.innerHTML = xmlreq.responseText;
         }else{
             result.innerHTML = "Erro: " + xmlreq.statusText;
         }
     }
 };
 xmlreq.send(null);
}

I would like to increase the display time of the loading and know how I can do it.

Answer 1

You can use setTimeout with callback for delay the request time. Note that I created a variable delay where you can put a value in seconds:

function loginRequest() {

   // Declaração de Variáveis

   var delay = 3; // tempo em segundos

   var usuario   = document.getElementById("txtusuario").value;
   var senha   = document.getElementById("txtsenha").value;
   var result = document.getElementById("resultado");
   var xmlreq = CriaRequest();

   // Exibi a imagem de progresso
   result.innerHTML = '<img id="loading-icon" src="./images/eclipse.gif"/>';

   setTimeout(function(){
      // Iniciar uma requisição
      xmlreq.open("GET", "./controllers/controller.php?txtusuario=" + usuario + "&txtsenha=" + senha, true);

      // Atribui uma função para ser executada sempre que houver uma mudança de ado
      xmlreq.onreadystatechange = function(){

         // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
         if (xmlreq.readyState == 4) {

            // Verifica se o arquivo foi encontrado com sucesso
            if (xmlreq.status == 200) {
               result.innerHTML = xmlreq.responseText;
            }else{
               result.innerHTML = "Erro: " + xmlreq.statusText;
            }
         }
      };
      xmlreq.send(null);
   }, delay*1000);
}

Answer 2

Ideally you do not increase the loading time, this will cause a false impression that the operation that the user has just fired, is slow. Keep in mind ALWAYS, the faster the better.

But if you really want to make the loading take a little longer, the best thing is to encapsulate it in a method that does the toggle of it. In a simple way and dirty it would be something like that

let showLoading = () => {
  // adicione aqui a transição de entrada do loading
  // recomendo criar uma class no css e add ela para
  // iniciar a transição
}

let hideLoading = () => {
  // adicione aqui a transição de saída do loading
  // recomendo criar uma class no css e add ela ou
  // remove a de entrada para fazer a saída animada
}

// Com os dois métodos acima, vc já conseguiria
// Resolver esse problema, contudo, se vc ainda
// Quiser fazer um toggle, vc pode fazer isso:

let showToHide, hideToShow, toggleLoading

showToHide = () => toggleLoading = () => { showLoading(); toggleLoading = hideToShow() }
hideToShow = () => toggleLoading = () => { hideLoading(); toggleLoading = showToHide() }

toggleLoading = showToHide()

toggleLoading() // vai mostrar o loading e vai definir o toggleLoading como hideToShow para esconder na próxima chamada do toggleLoading

toggleLoading() // vai esconder o loading e vai definir o toggleLoading como hideToShow para exibir na próxima chamada do toggleLoading

I saw that you are using es5, to work the example I sent, just change let for var and () => for function(){}.