# HG changeset patch
# User Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
# Date 1545491581 -3600
# Node ID e47b9bd55192ea9fc7bebf5ae781cf4d9f6863bc
# Parent  b994c6c19f5c2cb66ac461da497448283db4dd11
Also use a spinner on nickname get/set.

diff --git a/client.js b/client.js
--- a/client.js
+++ b/client.js
@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoa
     const jid_element = document.getElementById('jid');
     const pass_element = document.getElementById('pass');
     const connect_button = document.getElementById('connect');
-    const spinner_img = document.getElementById('spinner');
+    const spinner_img = document.getElementById('connect-spinner');
 
     const connected_div = document.getElementById('connected');
 
diff --git a/index.xhtml b/index.xhtml
--- a/index.xhtml
+++ b/index.xhtml
@@ -42,7 +42,8 @@
 <form id="connection">
 <label>JID: <input type="email" id="jid" placeholder="you@your-server.tld"/></label><br/>
 <label>Password: <input type="password" id="pass" placeholder="Password"/></label><br/>
-<input type="submit" id="connect" value="connect"/> <img src="spinner.svg" width="24" height="24" id="spinner" hidden=""/>
+<input type="submit" id="connect" value="connect"/>
+<img src="spinner.svg" width="24" height="24" id="connect-spinner" hidden=""/>
 </form>
 </div>
 
@@ -53,6 +54,7 @@
 <h2>Nickname</h2>
 <p>
 <label>Nickname: <input id="nick" placeholder="Nick"/></label>
+<img src="spinner.svg" width="24" height="24" id="nick-spinner"/>
 </p>
 <h2>Avatar</h2>
 <p>
diff --git a/nickname.js b/nickname.js
--- a/nickname.js
+++ b/nickname.js
@@ -2,6 +2,7 @@
 
 function initNickname(connection) {
     const nick_input = document.getElementById('nick');
+    const spinner_img = document.getElementById('nick-spinner');
 
     const iq = $iq({type: 'get'})
         .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
@@ -16,11 +17,13 @@ function initNickname(connection) {
         const id = item.getAttributeNS(null, 'id');
         const nick = parseXPath(item, './nickname:nick');
         nick_input.value = nick.textContent;
+        spinner_img.hidden = true;
     }
 
     function onNicknameRetrievalError(string)
     {
         console.log('Failed to retrieve nickname: ' + string);
+        spinner_img.hidden = true;
     }
 
     nick_input.addEventListener('blur', function (evt) {
@@ -31,15 +34,18 @@ function initNickname(connection) {
                         .c('nick', {xmlns: 'http://jabber.org/protocol/nick'})
                             .t(nick_input.value);
         connection.sendIQ(iq, onNicknameChanged, onNicknameChangeError);
+        spinner_img.hidden = false;
     });
 
     function onNicknameChanged(iq)
     {
         console.log("onNicknameChanged", iq);
+        spinner_img.hidden = true;
     }
 
     function onNicknameChangeError(iq)
     {
         console.log("onNicknameChangeError", iq);
+        spinner_img.hidden = true;
     }
 }