Visual indicator for when posting is happening, as well as disabling the button to prevent double-posts.

This commit is contained in:
Shpuld Shpuldson 2017-08-21 15:35:14 +03:00
parent 3ab9b477f8
commit d3169b057c
3 changed files with 10 additions and 1 deletions

View file

@ -40,6 +40,7 @@ const PostStatusForm = {
dropFiles: [], dropFiles: [],
submitDisabled: false, submitDisabled: false,
error: null, error: null,
posting: false,
newStatus: { newStatus: {
status: statusText, status: statusText,
files: [] files: []
@ -86,6 +87,7 @@ const PostStatusForm = {
this.caret = selectionStart this.caret = selectionStart
}, },
postStatus (newStatus) { postStatus (newStatus) {
this.posting = true
statusPoster.postStatus({ statusPoster.postStatus({
status: newStatus.status, status: newStatus.status,
media: newStatus.files, media: newStatus.files,
@ -104,6 +106,7 @@ const PostStatusForm = {
} else { } else {
this.error = data.error this.error = data.error
} }
this.posting = false
}) })
}, },
addMediaFile (fileInfo) { addMediaFile (fileInfo) {

View file

@ -17,7 +17,8 @@
</div> </div>
<div class='form-bottom'> <div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload> <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
<button :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button> <button v-if="posting" disabled class="btn btn-default base05 base01-background">Posting</button>
<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button>
</div> </div>
<div class='error' v-if="error"> <div class='error' v-if="error">
Error: {{ error }} Error: {{ error }}

View file

@ -17,6 +17,11 @@ const postStatus = ({ store, status, media = [], inReplyToStatusId = undefined }
} }
return data return data
}) })
.catch((err) => {
return {
error: err.message
}
})
} }
const uploadMedia = ({ store, formData }) => { const uploadMedia = ({ store, formData }) => {