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

3 files changed, 10 insertions, 1 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6b78b7dd..3313ec3f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -40,6 +40,7 @@ const PostStatusForm = {
       dropFiles: [],
       submitDisabled: false,
       error: null,
+      posting: false,
       newStatus: {
         status: statusText,
         files: []
@@ -86,6 +87,7 @@ const PostStatusForm = {
       this.caret = selectionStart
     },
     postStatus (newStatus) {
+      this.posting = true
       statusPoster.postStatus({
         status: newStatus.status,
         media: newStatus.files,
@@ -104,6 +106,7 @@ const PostStatusForm = {
         } else {
           this.error = data.error
         }
+        this.posting = false
       })
     },
     addMediaFile (fileInfo) {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e1e3e4be..e775c45e 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -17,7 +17,8 @@
       </div>
       <div class='form-bottom'>
         <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 class='error' v-if="error">
         Error: {{ error }}
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index ee8d160a..001ff8a5 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -17,6 +17,11 @@ const postStatus = ({ store, status, media = [], inReplyToStatusId = undefined }
       }
       return data
     })
+    .catch((err) => {
+      return {
+        error: err.message
+      }
+    })
 }
 
 const uploadMedia = ({ store, formData }) => {