Add note saving indicator

This commit is contained in:
Sol Fisher Romanoff 2022-06-23 15:04:19 +03:00
parent 4f0eabbd55
commit 398b2624c8
No known key found for this signature in database
GPG key ID: 9D3F2B64F2341B62
2 changed files with 38 additions and 8 deletions

View file

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

View file

@ -40,12 +40,24 @@
</dd> </dd>
</dl> </dl>
</div> </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 <tab-switcher
:active-tab="tab" :active-tab="tab"
:render-only-focused="true" :render-only-focused="true"
@ -210,7 +222,19 @@
} }
.note { .note {
position: relative;
margin: 0.5em 0.75em; margin: 0.5em 0.75em;
textarea {
width: 100%;
}
.preview-spinner {
position: absolute;
top: 0;
right: 0;
margin: 0.5em 0.25em;
}
} }
} }
.user-profile-placeholder { .user-profile-placeholder {