Add loading animation when searching pubkey

public/css/style.css

@@ -103,6 +103,38 @@ header.header img {
   margin: 5px auto;
  text-align: center;
 }
+
+/******************************************************************/
+/*                           LOADING PUBKEY                       */
+/******************************************************************/
+
+/*.loadingPubkey {
+//    display:    none;
+    position:   fixed;
+    z-index:    1000;
+    top:        0;
+    left:       0;
+    height:     100%;
+    width:      100%;
+    background: rgba( 255, 255, 255, .8 ) 
+                url('http://i.stack.imgur.com/FhHRx.gif') 
+                50% 50% 
+                no-repeat;
+}*/
+
+.loadingPubkey {
+    display:    none;
+    height:     20px;
+    width:      20px;
+    content:url('../images/ajax-loader.gif')
+}
+
+body.loading .loadingPubkey {
+    overflow: hidden;   
+    display: block;
+}
+
+
 /******************************************************************/
 /*                            POUR MOBILES                        */
 /******************************************************************/

src/Account/views/signup.twig

@@ -6,6 +6,7 @@
     <form action="{{ path('account.signup') }}" method="post">
       {{ csrf_input() }}
       {{ field('username', user.username, "Pseudo") }}
+      <div class="loadingPubkey"></div>
       <div id="livesearch-pubkey"></div>
       <div id=cle_pub>{{ field('pubkey', user.pubkey, "Clé publique") }}</div>
       {{ field('firstname', user.firstname, "Prénom") }}  {{ field('lastname', user.lastname, "Nom") }}
@@ -22,6 +23,9 @@
 
 var textInput = document.getElementById('username');
 var timeout = null;
+$body = $("body");
+noPubKey("hide")
+
 textInput.onkeyup = function (e) {
     clearTimeout(timeout);
     timeout = setTimeout(function () {
@@ -38,12 +42,14 @@ textInput.onkeyup = function (e) {
                 (pubkeyIsNull) ? noPubKey("block") : noPubKey("hide");
             }
         }
+        $body.addClass("loading");
         xmlhttp.open("GET","/ajax/getG1PubKey.php?vendeur="+textInput.value,true);
         xmlhttp.send();
     }, 800);
 };
 
 function noPubKey(state) {
+  $body.removeClass("loading");
   var textMbr = document.getElementById("cle_pub");
   if (state == "hide"){
     textMbr.style.display = "none";
@@ -52,6 +58,7 @@ function noPubKey(state) {
   }
 }
 
+
 </script>
 
 {% endblock %}