Add note saving indicator

src/components/user_profile/user_profile.js

@@ -42,7 +42,8 @@ const UserProfile = {
       userId: null,
       tab: defaultTabKey,
       footerRef: null,
-      note: null
+      note: null,
+      noteLoading: false
     }
   },
   created () {
@@ -152,8 +153,13 @@ const UserProfile = {
         window.open(target.href, '_blank')
       }
     },
-    setNote: debounce(function () {
+    setNote () {
+      this.noteLoading = true
+      this.debounceSetNote()
+    },
+    debounceSetNote: debounce(function () {
       this.$store.dispatch('setNote', { id: this.userId, note: this.note })
+      this.noteLoading = false
     }, 1500)
   },
   watch: {

src/components/user_profile/user_profile.vue

@@ -40,12 +40,24 @@
           </dd>
         </dl>
       </div>
-      <textarea
+      <div class="note">
-        v-model="note"
+        <textarea
-        class="note resize-height"
+          v-model="note"
-        :placeholder="$t('user_card.note')"
+          class="resize-height"
-        @input="setNote"
+          :placeholder="$t('user_card.note')"
-      />
+          @input="setNote"
+        />
+        <div
+          v-show="noteLoading"
+          class="preview-spinner"
+        >
+          <FAIcon
+            class="fa-old-padding"
+            spin
+            icon="circle-notch"
+          />
+        </div>
+      </div>
       <tab-switcher
         :active-tab="tab"
         :render-only-focused="true"
@@ -210,7 +222,19 @@
   }
 
   .note {
+    position: relative;
     margin: 0.5em 0.75em;
+
+    textarea {
+      width: 100%;
+    }
+
+    .preview-spinner {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0.5em 0.25em;
+    }
   }
 }
 .user-profile-placeholder {