From 398b2624c83f65cb627546fce91508f623a51c22 Mon Sep 17 00:00:00 2001
From: Sol Fisher Romanoff <sol@solfisher.com>
Date: Thu, 23 Jun 2022 15:04:19 +0300
Subject: [PATCH] Add note saving indicator

---
 src/components/user_profile/user_profile.js  | 10 ++++--
 src/components/user_profile/user_profile.vue | 36 ++++++++++++++++----
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 3390e732..b4c604f8 100644
--- a/src/components/user_profile/user_profile.js
+++ b/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: {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 602c002c..5a47cdde 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -40,12 +40,24 @@
           </dd>
         </dl>
       </div>
-      <textarea
-        v-model="note"
-        class="note resize-height"
-        :placeholder="$t('user_card.note')"
-        @input="setNote"
-      />
+      <div class="note">
+        <textarea
+          v-model="note"
+          class="resize-height"
+          :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 {