Adicionando ícone de espera em aplicativos YeAPF

A vantagem de usar uma plataforma unificada para suas requisições XMLHttpRequest e RESTful é que você acaba podendo unificar também sua interface com o usuário.

Muitas vezes seu servidor demora para responder e um belo ícone de de espera suaviza as coisas com o usuário. Todavia, fazer isso em cada requisição pode se tornar uma dor de cabeça

YeAPF (mais especificamente o ycomm) pode ser configurado para indicar toda vez que ele está ocupado com uma requisição ou quando ela se esgotou ou retornou do servidor.

Seu HTML

<script src='js/yloader.min.js'></script>
...
<div id="waitIcon"><img src="img/icone-de-espera.gif"></div>

Seu CSS

#waitIcon {
  display: none;
  position: fixed;
  right: 10px;
  top: 10px;
}

Seu JS

var myWaitIconControl = function(display) {
  if (display)
    y$('waitIcon').style.display='';
  else
    y$('waitIcon').style.display='none';
}

....

addOnLoadManager(
  function() {
    ycomm.setWaitIconControl(myWaitControl);
  }
);

Obvio que se quer adicionar alguma animação e tal, pode utilizar, por exemplo, y$(‘waitIcon’).deleteClass(‘hidden’) e y$(‘waitIcon’).addClass(‘hidden’); mas com o dito já é suficiente para o começo