--- 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();
         }