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,
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: {

View file

@ -40,12 +40,24 @@
</dd>
</dl>
</div>
<div class="note">
<textarea
v-model="note"
class="note resize-height"
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 {