# HG changeset patch
# User Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
# Date 1545491096 -3600
# Node ID cd0434bb2eb1df2abc94dee9ca2612f0634c678e
# Parent  5e97e1808a35b00e397e0aa8c46379279c6ca711
Add a spinner on connecting/disconnecting.

diff --git a/client.js b/client.js
--- a/client.js
+++ b/client.js
@@ -6,6 +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 connected_div = document.getElementById('connected');
 
@@ -74,11 +75,13 @@ document.addEventListener('DOMContentLoa
             connect_button.value = 'disconnect';
             jid_element.disabled = true;
             pass_element.disabled = true;
+            spinner_img.hidden = false;
         } else if (status == Strophe.Status.CONNFAIL) {
             console.log('Strophe failed to connect.');
             onDisconnected();
         } else if (status == Strophe.Status.DISCONNECTING) {
             console.log('Strophe is disconnecting.');
+            spinner_img.hidden = false;
         } else if (status == Strophe.Status.DISCONNECTED) {
             console.log('Strophe is disconnected.');
             onDisconnected();
@@ -91,6 +94,7 @@ document.addEventListener('DOMContentLoa
     function onConnected()
     {
         connected_div.hidden = false;
+        spinner_img.hidden = true;
         initRoster(connection);
         initPEP(connection);
         initNickname(connection);
@@ -102,6 +106,7 @@ document.addEventListener('DOMContentLoa
         connect_button.value = 'connect';
         jid_element.disabled = false;
         pass_element.disabled = false;
+        spinner_img.hidden = true;
         for (let item of document.getElementById('roster-table')) {
             item.remove();
         }
diff --git a/index.xhtml b/index.xhtml
--- a/index.xhtml
+++ b/index.xhtml
@@ -41,7 +41,7 @@
 <form id="connection">
 <label>JID: <input type="email" id="jid"/></label><br/>
 <label>Password: <input type="password" id="pass"/></label><br/>
-<input type="submit" id="connect" value="connect"/>
+<input type="submit" id="connect" value="connect"/> <img src="spinner.svg" width="24" height="24" id="spinner" hidden=""/>
 </form>
 
 <div id="connected" hidden="">
diff --git a/spinner.svg b/spinner.svg
new file mode 100644
--- /dev/null
+++ b/spinner.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 40 40">
+  <circle r="18" fill="none" stroke="black" stroke-width="4" stroke-dasharray="125">
+    <animate attributeName="stroke-dashoffset" values="26.4; 120; 26.4" keyTimes="0; 0.5; 1" dur="4s" repeatCount="indefinite"/>
+    <animateTransform attributeName="transform" type="rotate" values="0; 720; 1080" keyTimes="0; 0.5; 1" dur="4s" repeatCount="indefinite"/>
+  </circle>
+</svg>