diff --git a/templates/default/bookdetail.html b/templates/default/bookdetail.html
index 53add58..f082eb6 100644
--- a/templates/default/bookdetail.html
+++ b/templates/default/bookdetail.html
@@ -10,7 +10,7 @@
         {{~it.book.datas:data:i}}
         <a href="{{=data.url}}">{{=data.format}}</a>
         {{? data.mail == 1}}
-        <a title="Mail" href="empty.php" onclick="sendToMailAddress (this, {{=data.id}}); return false;"><i class="icon-envelope icon-large"></i></a>
+        <a id="mailButton" title="Mail" href="empty.php" onclick="sendToMailAddress (this, {{=data.id}}); return false;"><i class="icon-envelope icon-large"></i></a>
         {{?}}
         <br />
         {{~}}
diff --git a/util.js b/util.js
index 338574f..f737751 100644
--- a/util.js
+++ b/util.js
@@ -51,6 +51,7 @@ function elapsed () {
 }
 
 function retourMail(data, textStatus, jqXHR ) {
+    $("#mailButton :first-child").removeClass ("icon-spinner icon-spin").addClass ("icon-envelope");
     alert (data);
 }
 
@@ -64,6 +65,7 @@ function sendToMailAddress (component, dataid) {
     if (currentData.databaseId) {
         url = url + '?db=' + currentData.databaseId;
     }
+    $("#mailButton :first-child").removeClass ("icon-envelope").addClass ("icon-spinner icon-spin");
     $.ajax ({'url': url, 'type': 'post', 'data': { 'data':  dataid, 'email': email }, 'success': retourMail});
 }