Room avatar picker and progress loading

src/components/Profile.vue

@@ -23,6 +23,7 @@
             size="48"
             color="#e0e0e0"
             @click="showAvatarPicker"
+            v-if="isAvatarLoaded"
           >
             <img v-if="userAvatar" :src="userAvatar" />
             <span v-else class="white--text">{{ userAvatarLetter }}</span>
@@ -36,6 +37,15 @@
               class="d-none"
             />
           </v-avatar>
+          <v-progress-circular
+            :rotate="360"
+            v-else
+            :width="3"
+            :value="loadValue"
+            color="primary"
+          >
+            {{ loadValue }}
+          </v-progress-circular>
         </v-col>
         <v-col class="flex-shrink-1 flex-grow-1">
           <div class="h1">{{ displayName }}</div>
@@ -191,6 +201,8 @@ export default {
       newPassword2: null,
       settingPassword: false,
       passwordErrorMessage: null,
+      isAvatarLoaded: true,
+      loadValue: 0
     };
   },
 
@@ -326,9 +338,14 @@ export default {
         reader.readAsDataURL(event.target.files[0]);
       }
     },
-
     setAvatar(image) {
+      const self = this;
+      this.isAvatarLoaded = false;
       return util.setAvatar(this.$matrix, image, function (progress) {
+        self.loadValue = Math.round(progress.loaded/progress.total * 100);
+        if(progress.loaded === progress.total) {
+          self.isAvatarLoaded = true;
+        }
         console.log("Progress: " + JSON.stringify(progress));
       });
     },