--- a/avatar.js
+++ b/avatar.js
@@ -10,12 +10,15 @@ function initAvatar(connection) {
     const avatar_upload = document.getElementById('avatar-upload');
     const avatar_change = document.getElementById('avatar-change');
     const avatar_access = document.getElementById('avatar-access');
+    const spinner_img = document.getElementById('avatar-spinner');
+    const access_model_spinner_img = document.getElementById('access-model-avatar-spinner');
 
     avatar_img.src = DEFAULT_AVATAR;
     const iq = $iq({type: 'get'})
         .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
             .c('items', {node: 'urn:xmpp:avatar:metadata'});
     connection.sendIQ(iq, onAvatarMetadata, onAvatarRetrievalError.bind(null, 'PubSub metadata query failed.'));
+    spinner_img.hidden = false;
 
     function onAvatarMetadata(result_iq)
     {
@@ -64,12 +67,14 @@ function initAvatar(connection) {
         };
         */
         avatar_img.src = url;
+        spinner_img.hidden = true;
     }
 
     function onAvatarRetrievalError(string)
     {
         console.log('Failed to retrieve avatar, an empty one is displayed instead: ' + string);
         avatar_img.src = DEFAULT_AVATAR;
+        spinner_img.hidden = true;
     }
 
     avatar_upload.addEventListener('click', function (evt) {
@@ -90,6 +95,11 @@ function initAvatar(connection) {
                                 height: avatar_img.naturalHeight,
                             });
         connection.sendIQ(metadata_iq, onAvatarMetadataUpload, onAvatarUploadError);
+        spinner_img.hidden = false;
+    });
+
+    function onAvatarMetadataUpload(iq)
+    {
         const data_iq = $iq({type: 'set'})
             .c('pubsub', {xmlns: 'http://jabber.org/protocol/pubsub'})
                 .c('publish', {node: 'urn:xmpp:avatar:data'})
@@ -97,11 +107,6 @@ function initAvatar(connection) {
                         .c('data', {xmlns: 'urn:xmpp:avatar:data'})
                             .t(avatar_data.data);
         connection.sendIQ(data_iq, onAvatarDataUpload, onAvatarUploadError);
-    });
-
-    function onAvatarMetadataUpload(iq)
-    {
-        console.log("onAvatarMetadataUpload", iq);
     }
 
     function onAvatarDataUpload(iq)
@@ -109,11 +114,13 @@ function initAvatar(connection) {
         console.log('Avatar successfully uploaded!', iq);
         avatar_change.disabled = true;
         avatar_size.innerHTML = '';
+        spinner_img.hidden = true;
     }
 
     function onAvatarUploadError(iq)
     {
         console.log("onAvatarUploadError", iq);
+        spinner_img.hidden = true;
     }
 
     avatar_file.addEventListener('change', function (evt) {
@@ -173,15 +180,18 @@ function initAvatar(connection) {
     avatar_access.addEventListener('change', function (evt) {
         const iq = configurePEPField('urn:xmpp:avatar:metadata', 'pubsub#access_model', evt.target.value);
         connection.sendIQ(iq, onAvatarConfigured, onAvatarConfigureError.bind(null, 'PubSub configuration failed.'));
+        access_model_spinner_img.hidden = false;
     });
 
     function onAvatarConfigured(result_iq)
     {
         console.log('Successfully set avatar access model.')
+        access_model_spinner_img.hidden = true;
     }
 
     function onAvatarConfigureError(string)
     {
         console.log('Failed to configure avatar node: ' + string);
+        access_model_spinner_img.hidden = true;
     }
 }